If checkbox is checked && Text is "" then error

CarleyAnn · Jan 9, 2007

Here is what I want to happen.
If someone checks the box that they want to participate on the committee (bottom of form), AND either the Name OR Phone are blank, then display the error when they click submit.

Thank you!!

Here is the snippet of just this line of Javascript...

Code:

[COLOR=red]if (document.HRSurvey.participate.checked && document.HRSurvey.names.value=="" || document.HRSurvey.phone.value=="")
	{
errormessage += " Please provide your name and phone to receive information about the Benefits Council, or uncheck the box.\n";
}
[/color]

Here is the entire form...

Code:

<html><head>
<title>Employee Survey</title>


<!-- Beginning of JavaScript for checking required fields -->		
<script type="text/javascript" language="JavaScript">	

<!--
function CheckRequiredFields() {
errormessage = "Please answer the following:\n";


if (radioNotChecked(document.HRSurvey.easy)) 
{
errormessage += " The HR page is easy to understand and navigate.\n";
}

if (radioNotChecked(document.HRSurvey.locateinfo)) 
{
errormessage += " I was able to locate information quickly.\n";
}

if (radioNotChecked(document.HRSurvey.titles)) 
{
errormessage += " The document titles are easy to understand.\n";
}

if (radioNotChecked(document.HRSurvey.resource)) 
{
errormessage += " It is a good resource for employees and managers.\n";
}

if (radioNotChecked(document.HRSurvey.use)) 
{
errormessage += " I will use the HR Page regularly.\n";
}
[b]
if (document.HRSurvey.participate.checked && document.HRSurvey.names.value=="" || document.HRSurvey.phone.value=="")
	{
errormessage += " Please provide your name and phone to receive information about the Benefits Council, or uncheck the box.\n";
}
[/b]



function noenter() {
  return !(window.event && window.event.keyCode == 13); }

  

function radioNotChecked(grp) {
    var i, len = grp.length;
    for(i=0; i<len; i++) {
        if(grp[i].checked) return false;
    }
    return true;
}


if(errormessage.length > 30){
alert(errormessage);
return false;
}
else{
return true;
}



}
//-->
</script>

</head>
<body>

<form name="HRSurvey" method="post" onSubmit="return CheckRequiredFields()" action="xt_email.asp">

<table cellspacing="2" cellpadding="6" border="1" width="100%">
	<tr>
	<td colspan="2">
	
	
	
<h2 align="center">Tell us what you think about the HR Benefits Page</h2>
<table cellpadding="8" border="1" width="100%">
	<tr><td colspan="2">
<h4>We value your thoughts and opinions.<br/><br/>


<em>Instructions:</em> The survey items below are to be answered using the number associated with the choice that comes closest to your own feelings.<br/><br/>

You may submit this form anonymously.
</h4>
	</td></tr>
	</table>



	</td>
	</tr>


	<tr bgcolor="#c0c0c0">
	<td colspan="2">

1=Strongly Disagree &nbsp; 2=Disagree &nbsp; 3=Neither Agree Nor Disagree &nbsp; 4=Agree &nbsp; 5=Strongly Agree
	</td>
	</tr>


	<tr bgcolor="#99CCFF">
	<td width="50%">
<strong>The HR page is easy to understand and navigate.</strong></td>
<td width="50%" valign="middle">
<input type="radio" name="easy" value="Strongly Disagree" />1&nbsp;&nbsp;
<input type="radio" name="easy" value="Disagree" />2&nbsp;&nbsp;
<input type="radio" name="easy" value="Neither Agree Nor Disagree" />3&nbsp;&nbsp;
<input type="radio" name="easy" value="Agree" />4&nbsp;&nbsp;
<input type="radio" name="easy" value="Strongly Agree" />5&nbsp;&nbsp;

<br/><br/>
	</td>
	</tr>


	<tr bgcolor="#c0c0c0">
	<td width="50%">
<strong>I was able to locate information quickly.</strong></td>
<td width="50%"><input type="radio" name="locateinfo" value="Strongly Disagree" />1&nbsp;&nbsp;
<input type="radio" name="locateinfo" value="Disagree" />2&nbsp;&nbsp;
<input type="radio" name="locateinfo" value="Neither Agree Nor Disagree" />3&nbsp;&nbsp;
<input type="radio" name="locateinfo" value="Agree" />4&nbsp;&nbsp;
<input type="radio" name="locateinfo" value="Strongly Agree" />5&nbsp;&nbsp;
<br/><br/>
	</td>
	</tr>

	<tr bgcolor="#99CCFF">
	<td width="50%">

<strong>The document titles are easy to understand.</strong></td>
<td width="50%"><input type="radio" name="titles" value="Strongly Disagree" />1&nbsp;&nbsp;
<input type="radio" name="titles" value="Disagree" />2&nbsp;&nbsp;
<input type="radio" name="titles" value="Neither Agree Nor Disagree" />3&nbsp;&nbsp;
<input type="radio" name="titles" value="Agree" />4&nbsp;&nbsp;
<input type="radio" name="titles" value="Strongly Agree" />5&nbsp;&nbsp;





<br/><br/>
	</td>
	</tr>
	
	<tr bgcolor="#c0c0c0">
	<td width="50%">
<strong>It is a good resource for employees and managers.</strong></td>
<td width="50%"><input type="radio" name="resource" value="Strongly Disagree" />1&nbsp;&nbsp;
<input type="radio" name="resource" value="Disagree" />2&nbsp;&nbsp;
<input type="radio" name="resource" value="Neither Agree Nor Disagree" />3&nbsp;&nbsp;
<input type="radio" name="resource" value="Agree" />4&nbsp;&nbsp;
<input type="radio" name="resource" value="Strongly Agree" />5&nbsp;&nbsp;

<br/><br/>
	</td>
	</tr>
	
	
	<tr bgcolor="#99CCFF">
	<td width="50%">
<strong>I will use the HR Benefits Page regularly.</strong></td>
<td width="50%"><input type="radio" name="use" value="Strongly Disagree" />1&nbsp;&nbsp;
<input type="radio" name="use" value="Disagree" />2&nbsp;&nbsp;
<input type="radio" name="use" value="Neither Agree Nor Disagree" />3&nbsp;&nbsp;
<input type="radio" name="use" value="Agree" />4&nbsp;&nbsp;
<input type="radio" name="use" value="Strongly Agree" />5&nbsp;&nbsp;
<br/><br/>

	</td>
	</tr>
	
	
	
	<tr bgcolor="#c0c0c0">
	<td colspan="2">

<strong>Please share your comments and suggestions regarding HHS' new benefits page:</strong><br/>
<textarea cols="75" rows="3" name="comments" onkeypress="return noenter()" ></textarea>

<br/><br/>
	</td>
	</tr>
	
	
	<tr><td colspan="2">
<h4>At this time HR is creating a team of employees to provide feedback and suggestions regarding current and future benefit programs offered at HHS.  Would you be interested in participating on this team?<br/><br/>
[b]<input type="Checkbox" name="participate" /> Yes, please contact me about participating on the Benefits Council.
</h4>
[/b]	
<strong>Name:</strong>
<input type="text" size="40" name="names" onkeypress="return noenter()" />
&nbsp;&nbsp;&nbsp;
<strong>Phone:</strong>
<input type="text" size="15" name="phone" onkeypress="return noenter()" />
	</td>
	</tr>
	
	<tr align="center" bgcolor="#c0c0c0">
	<td colspan="2">
	
<input type="submit" value="submit" />&nbsp;&nbsp;<input type="reset" value="clear" />
</td>	</tr>

</table></form>
	

	
	

</body>
</html>

Thank you again.

kaht · Jan 9, 2007

Your problem is that you are not encapsulating the "OR" part of the clause in parentheses.

Code:

if (document.HRSurvey.participate.checked && document.HRSurvey.names.value=="" || document.HRSurvey.phone.value=="")

says this: If participate is checked and names is blank OR phone is blank throw an error.

That means that you'll get an error every time phone is blank, irregardless if the other part of the clause passes.

I'll go ahead and tidy up your code a bit while we're at it to make sure that you get no warnings in the javascript console (and make it a few milliseconds faster). Proper indentation also makes code 1000s of times easier to read and debug.

Code:

function CheckRequiredFields() {
   [!]var theForm = document.forms["HRSurvey"];[/!]
   errormessage = "Please answer the following:\n";
   if (radioNotChecked(theForm.elements["easy"])) {
      errormessage += " The HR page is easy to understand and navigate.\n";
   }
   if (radioNotChecked(theForm.elements["locateinfo"])) {
      errormessage += " I was able to locate information quickly.\n";
   }
   if (radioNotChecked(theForm.elements["titles"])) {
      errormessage += " The document titles are easy to understand.\n";
   }
   if (radioNotChecked(theForm.elements["resource"])) {
      errormessage += " It is a good resource for employees and managers.\n";
   }
   if (radioNotChecked(theForm.elements["use"])) {
      errormessage += " I will use the HR Page regularly.\n";
   }
   if (theForm.elements["participate"].checked && [!]([/!]theForm.elements["names"].value=="" || theForm.elements["phone"].value==""[!])[/!]) {
      errormessage += " Please provide your name and phone to receive information about the Benefits Council, or uncheck the box.\n";
   }
}

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

Abraxus · Jan 9, 2007

Great suggestions kaht! I even go a step further to tidy up form processing code by passing the form into the checking function:

Code:

<form name="HRSurvey" method="post" onSubmit="return CheckRequiredFields([COLOR=red]this[/color])" action="xt_email.asp">

Which allows the function to operate this way:

Code:

function CheckRequiredFields([COLOR=red]f[/color]) {
   errormessage = "";
   if (radioNotChecked([COLOR=red]f.easy[/color])) {
      errormessage += " The HR page is easy to understand and navigate.\n";
   }
   ...etc...

As long we're on the subject, perhaps it's more efficient when constructing an error message to leave the variable blank until the checking function actually finds an error, then at the end of the checking function you have this:

Code:

if (errormessage != "") {
   alert("The following fields were not correctly completed:\n\r" + errormessage);
   return false;
} else {
   return true;
}

Hope something in there helps

kaht · Jan 9, 2007

Just to note:

Code:

function CheckRequiredFields(f) {
   errormessage = "";
   if (radioNotChecked([!]f.easy[/!])) {
      errormessage += " The HR page is easy to understand and navigate.\n";
   }
   ...etc...

will still throw warnings in the javascript error console in firefox. Using the elements collection rectifies this situation (and as an added bonus prevents things breaking when accessing elements named submit or elements, not that you should be naming form elements that anyway [smile]

)

-kaht

http://www.silkypups.com

[small](All puppies have now found loving homes, thanks for all who showed interest)[/small]

CarleyAnn · Jan 10, 2007

Thank you. My form is working as intended now. [ponytails2]

Abraxus · Jan 10, 2007

Duly noted, thank you kaht! I'm a most avid Firefox user, but admittedly only use the js console when I'm completely stumped on a js error, so I probably just don't notice those warnings. I'm dedicated to making my code as versatile and efficient as possible, thanks for the details

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

If checkbox is checked && Text is "" then error

CarleyAnn

Programmer

kaht

Programmer

Abraxus

Programmer

kaht

Programmer

CarleyAnn

Programmer

Abraxus

Programmer

Similar threads

Part and Inventory Search

Sponsor

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

If checkbox is checked &amp;&amp; Text is &quot;&quot; then error

CarleyAnn

Programmer

kaht

Programmer

Abraxus

Programmer

kaht

Programmer

CarleyAnn

Programmer

Abraxus

Programmer

Similar threads

Log in

Part and Inventory Search

Sponsor

If checkbox is checked && Text is "" then error