Jump to content

Adding A Mandatory Checkbox To My Form


mboehler3
 Share

Recommended Posts

I am looking for an opinion on the best way to implement a mandatory checkbox on my form. The form I am adding a checkbox to is here:http://www.surepayroll.com/surechoice/surechoice-refer.aspI want to add a checkbox at the very bottom, right before the Submit button, that says something like "By checking this checkbox I accept the terms and conditions <link> of the agreement." The user must check the box in order to successfully submit.Right now if you leave the fields blank, a JavaScript pop-up is displayed which tells you the information you left out. I would like the checkbox to follow this same structure; for example, if the user does not check the box, a message will show in the popup similar to that of the other fields'. I am new to JavaScript, so I didn't put together the form you see on the page and is why I am coming here for help. Hopefully with someone's help I will better understand how to do this on my own.Thank you for any suggestions/help you can provide.Here is a screenshot of what I am trying to accomplish:termsandcond.gifThe form uses the following JS:

							function checkrefervalues(){								message="";								if(document.referaclient.name.value.length ==0){												message = message+"Please enter your Name.\n";								}																	if(document.referaclient.areacode.value.length != 3 || document.referaclient.exchange.value.length != 3 || document.referaclient.phonenumber.value.length != 4){										if(IsNumeric(document.referaclient.areacode.value) != 1	|| IsNumeric(document.referaclient.exchange.value) != 1 || IsNumeric(document.referaclient.phonenumber.value) != 1){										message = message+"Please enter your Numeric Phone Number.\n";										}										else { message = message+"Please enter your Phone Number.\n";}								}								else{ 									if(IsNumeric(document.referaclient.areacode.value) != 1	|| IsNumeric(document.referaclient.exchange.value) != 1 || IsNumeric(document.referaclient.phonenumber.value) != 1){									message = message+"Please enter your Numeric Phone Number.\n";									}								}																if(document.referaclient.exchange.value == 555){									message = message+"Please enter your Valid Phone Number.\n";								}																if (document.referaclient.email.value.length ==0){										message = message+"Please enter your Email Address.\n";									}									else {									 	checkemail(document.referaclient.email.value)									}																		if (document.referaclient.contactemail.value.length ==0){										message = message+"Please enter your Client's Email Address.\n";									}									else {									 	checkemail2(document.referaclient.contactemail.value)									}																		if(document.referaclient.contactname.value.length ==0){												message = message+"Please enter your Client's Name.\n";								}																	if(document.referaclient.c_areacode.value.length != 3 || document.referaclient.c_exchange.value.length != 3 || document.referaclient.c_phonenumber.value.length != 4){										if(IsNumeric(document.referaclient.c_areacode.value) != 1	|| IsNumeric(document.referaclient.c_exchange.value) != 1 || IsNumeric(document.referaclient.c_phonenumber.value) != 1){										message = message+"Please enter your Client's Numeric Phone Number.\n";										}										else { message = message+"Please enter your Client's Phone Number.\n";}								}								else{ 									if(IsNumeric(document.referaclient.c_areacode.value) != 1	|| IsNumeric(document.referaclient.c_exchange.value) != 1 || IsNumeric(document.referaclient.c_phonenumber.value) != 1){									message = message+"Please enter your Client's Phone Number.\n";									}								}																if(document.referaclient.c_exchange.value == 555){									message = message+"Please enter your Client's Valid Phone Number.\n";								}																if (message.length > 0){											alert(message);										return false;									}																					return true;								}																			function checkemail(str){								var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i								if (filter.test(str))								testresults=true								else{								message = message + "Your Email address seems incorrect (check @ and .'s)\n"								return false;								}								}															function checkemail2(str){								var filter=/^([\w-]+(?:\.[\w-]+)*)@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$/i								if (filter.test(str))								testresults=true								else{								message = message + "Your Client's Email address seems incorrect (check @ and .'s)\n"								return false;								}								}							function IsNumeric(sText)								{								   var ValidChars = "0123456789";								   var IsNumber=true;								   var Char;																 								   for (i = 0; i < sText.length && IsNumber == true; i++) 									  { 									  Char = sText.charAt(i); 									  if (ValidChars.indexOf(Char) == -1) 										 {										 IsNumber = false;										 }									  }									 return IsNumber;	   							}

Edited by mboehler3
Link to comment
Share on other sites

Give the checkbox a name like the other fields, and access it the same way you do with the other fields. The checked property of the checkbox object will be true if the box is checked, false otherwise.
Here's what I put into the HTML
<input type="checkbox" name="terms" value="" tabindex="11" /></span>					<p>I accept the terms and conditions.</p>

And in the JS:

if (document.referaclient.terms.value.checked ==false){									message = message+"Please agree to the Terms & Conditions.\n";								}

But I don't see the result I hoped for... am I writing the JS correctly?

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...