phpSensei Posted February 11, 2008 Share Posted February 11, 2008 I require a little script help regarding somewhat of a checkbox "check/unchecked" detector, and it should validate other sections of the form depending if the checkbox is true (checked) or false (unchecked)... <script type="text/javascript"> function validate_required(field,alerttxt) { with (field) { if (value==null||value=="") {alert(alerttxt);return false;} else {return true} } } function validate_box(field) { with (field) { if(document.frm.C1.checked){ return true; } else { return false; } } } function validate_email(field,alerttxt) { with (field) { apos=value.indexOf("@"); dotpos=value.lastIndexOf("."); if (apos<1||dotpos-apos<2) {alert(alerttxt);return false;} else {return true;} } } function validate_form(thisform) { with (thisform) { if (validate_required(fname,"First Name must be filled out!")==false) {fname.focus();return false;} else if (validate_required(lname,"Last Name must be filled out!")==false) {lname.focus();return false;} else if (validate_required(title,"Title must be filled out!")==false) {title.focus();return false;} else if (validate_required(title2,"Company must be filled out!")==false) {title2.focus();return false;} else if (validate_box(C1)==true) { if(validate_required(email,"email2 must be filled out!")==false) { email.focus();return false; } } else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false) {phone1.focus();return false;} else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false) {phone2.focus();return false;} else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false) {phone3.focus();return false;} } } </script> AS you can see the code is written by me, and I am new to Javascript. Also I am not the best but this little piece of code: function validate_box(field) { with (field) { if(document.frm.C1.checked){ return true; } else { return false; } } } </script> Is suposed to check if the checkbox is checked, it returns true once that is set. Then we use the function here else if (validate_box(C1)==true) { if(validate_required(email,"email2 must be filled out!")==false) { email.focus();return false; } } This means if the checkbox is checked, then the email field cant be empty, else it alerts you. It doesn't work. Here is the form <form action="mail.php" onsubmit="return validate_form(this)" name="frm" method="post"> <br> <table width="469" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="129" height="19" valign="top">First Name: </td> <td colspan="3" valign="top"><input type="text" name="fname" size="32" class="txtinput" id="fname"> <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td width="5"></td> </tr> <tr> <td height="19" valign="top">Last Name: </td> <td colspan="3" valign="top"><input type="text" name="lname" size="32" class="txtinput" id="lname"> <font color="#FF0000" face="Arial" size="2">*<br> <br> </font></td> <td></td> </tr> <tr> <td height="19" valign="top">Title: </td> <td colspan="3" valign="top"><input type="text" name="title" size="32" class="txtinput" id="title"> <font color="#FF0000" face="Arial" size="2"><br> <br> </font></td> <td></td> </tr> <tr> <td height="19" valign="top">Company Name: </td> <td colspan="3" valign="top"><input type="text" name="title2" size="32" class="txtinput" id="comp_name"> <br> <br></td> <td></td> </tr> <tr> <td height="19" valign="top">Email Address: </td> <td colspan="3" valign="top"><input type="text" name="email" size="32" class="txtinput" id="email"> <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td></td> </tr> <tr> <td height="19" valign="top">Telephone Number: </td> <td colspan="3" valign="top"><input type="text" name="phone1" size="5" class="txtinput" id="phone1" maxlength="3"> - <input type="text" name="phone2" size="5" class="txtinput" id="phone2" maxlength="3"> - <input type="text" name="phone3" size="5" class="txtinput" id="phone3" maxlength="4"> <input type="hidden" name="phone" size="5" class="txtinput" id="phone" > <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td></td> </tr> <tr> <td height="19" valign="top">Best time to call: </td> <td colspan="3" valign="top"> Between <select class="txtinput" id="Time1" name="Time1"> <option selected>8:00 AM</option> <option>9:00 AM</option> <option>10:00 AM</option> <option>11:00 AM</option> <option>12:00 PM</option> <option>1:00 PM</option> <option>2:00 PM</option> <option>3:00 PM</option> <option>4:00 PM</option> <option>5:00 PM</option> <option>6:00 PM</option> </select> and <select class="txtinput" id="Time2" name="Time2"> <option selected>8:00 AM</option> <option>9:00 AM</option> <option>10:00 AM</option> <option>11:00 AM</option> <option>12:00 PM</option> <option>1:00 PM</option> <option>2:00 PM</option> <option>3:00 PM</option> <option>4:00 PM</option> <option>5:00 PM</option> <option>6:00 PM</option> </select> <select class="txtinput" id="Time3" name="Time3"> <option selected>Eastern</option> <option>Central</option> <option>Mountain</option> <option>Pacific</option> <option>Alaskan</option> <option>Hawaiian</option> </select> <br> <br> </td> <td></td> </tr> <tr> <td height="19" valign="top">Message: </td> <td colspan="3" valign="top"><textarea rows="4" name="msg" cols="40" id="msg" class="txtinput"></textarea> <br> <br></td> <td></td> </tr> <tr > <td colspan=4><br> <input type="checkbox" name="C1" value="ON"> I would like to receive more info on project offerings and investor briefings<br> <br> <input type="checkbox" name="C1" value="ON"> I would like to receive monthly newsletters<br> <br> <input type="checkbox" name="C2" value="ON"> Please send me an information package by mail to the following address:<br> <br> <td></td> <tr> <td height="19" valign="top"><div align="right">Address Line 1: <br> </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name" size="32" class="txtinput" id="comp_name"> <br> <br> </td> <td></td> </tr> <tr> <td height="23" valign="top"><div align="right"> <p>Address Line 2: </p> </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2"> <br> <br></td> <td></td> </tr> <tr> <td height="27" valign="top"><div align="right"> City: </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2"> </td> <td></td> </tr> <tr> <td height="26" valign="top"> <div align="right">State: </div></td> <td width="80" valign="top"> <select name="State" class="txtinput" id="State"> <option value="Alabama" selected="selected">AL</option> <option value="Alaska">AK</option> <option value="Arizona">AZ</option> <option value="Arkansas">AR</option> <option value="California">CA</option> <option value="Colorado">CO</option> <option value="Connecticut">CT</option> <option value="Delaware">DE</option> <option value="District of Columbia">DC</option> <option value="Florida">FL</option> <option value="Georgia">GA</option> <option value="Hawaii">HI</option> <option value="Idaho">ID</option> <option value="Illinois">IL</option> <option value="Indiana">IN</option> <option value="Iowa">IA</option> <option value="Kanasas">KS</option> <option value="Kentucky">KY</option> <option value="Louisiana">LA</option> <option value="Maine">ME</option> <option value="Maryland">MD</option> <option value="Massachusetts">MA</option> <option value="Michigan">MI</option> <option value="Minnesota">MN</option> <option value="Mississippi">MS</option> <option value="Missouri">MO</option> <option value="Montana">MT</option> <option value="Nebraska">NE</option> <option value="Nevada">NV</option> <option value="New Hampshire">NH</option> <option value="New Jersey">NJ</option> <option value="New Mexico">NM</option> <option value="New York">NY</option> <option value="North Carolina">NC</option> <option value="North Dakota">ND</option> <option value="Ohio">OH</option> <option value="Oklahoma">OK</option> <option value="Oregon">OR</option> <option value="Pennsylvania">PA</option> <option value="Rhode Island">RI</option> <option value="South Carolina">SC</option> <option value="South Dakota">SD</option> <option value="Tennessee">TN</option> <option value="Texas">TX</option> <option value="Utah">UT</option> <option value="Vermont">VT</option> <option value="Virginia">VA</option> <option value="Washington">WA</option> <option value="West Virginia">WV</option> <option value="Wisconsin">WI</option> <option value="Wyoming">WY</option> </select> </td> <td width="52" valign="top">Zipcode</td> <td width="203" valign="top"><input type="text" name="comp_name2" size="9" class="txtinput" id="comp_name2"></td> <td></td> </tr> <tr> <td height="64" colspan=4 valign="top"> <div align="center"> <br> <br> <input type="submit" value="Submit" name="B1" class="txtinput"> <input type="reset" value="Reset" name="B2" class="txtinput"> <br> </div> <td></td> </tr> <br> <br> <br> <input type="checkbox" name="C3" value="ON"> I would like to receive monthly newletters <br> <br> </table> </form> Quote Link to comment Share on other sites More sharing options...
rhodesa Posted February 11, 2008 Share Posted February 11, 2008 Ok, first, WITH statements are for repetitively setting attributes of a particular object. Style attributes are a common use for this: var ele = document.getElementById('foobar'); with(ele.style){ color = '#FF0000'; width = '200px'; fontSize = '15pt'; } So, there are several cases below that I removed the with... Here is an updated copy of the JS (sorry I moved all your braces...it's personal preference and I'll miss an error otherwise...) <script type="text/javascript"> function validate_required(field,alerttxt) { if (!field.value.length) { alert(alerttxt); field.focus(); return false; } else return true; } //You don't use this, so i commented it out //function validate_email(field,alerttxt) //{ //with (field) //{ //apos=value.indexOf("@"); //dotpos=value.lastIndexOf("."); //if (apos<1||dotpos-apos<2) // {alert(alerttxt);return false;} //else {return true;} //} //} function validate_form(thisform) { with (thisform) { if (!validate_required(fname,"First Name must be filled out!")) return false; if (!validate_required(lname,"Last Name must be filled out!")) return false; if (!validate_required(title,"Title must be filled out!")) return false; if (!validate_required(title2,"Company must be filled out!")) return false; if (C1.checked && !validate_required(email,"email2 must be filled out!")) return false; if (!validate_required(phone1,"Phone Box 1 must be filled out!")) return false; if (!validate_required(phone2,"Phone Box 2 must be filled out!")) return false; if (!validate_required(phone3,"Phone Box 3 must be filled out!")) return false; } return true; } </script> Quote Link to comment Share on other sites More sharing options...
phpSensei Posted February 11, 2008 Author Share Posted February 11, 2008 It still doesn't work, I checked the checkbox, and the email is empty, and still no alerts. Maybe dig into it a little further, or thankyou for trying Quote Link to comment Share on other sites More sharing options...
phpSensei Posted February 11, 2008 Author Share Posted February 11, 2008 Here is the current code: function validate_form(thisform) { with (thisform) { if (validate_required(fname,"First Name must be filled out!")==false) {fname.focus();return false;} else if (validate_required(lname,"Last Name must be filled out!")==false) {lname.focus();return false;} else if (validate_required(title,"Title must be filled out!")==false) {title.focus();return false;} else if (validate_required(title2,"Company must be filled out!")==false) {title2.focus();return false;} else if (C1.checked && validate_required(email,"email2 must be filled out!")) {email.focus();return false;} else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false) {phone1.focus();return false;} else if (length_value(phone1,3,"Phone Box must be in this format: 000-0000-000")==false) {phone1.focus();return false;} else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false) {phone2.focus();return false;} else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false) {phone3.focus();return false;} } } Quote Link to comment Share on other sites More sharing options...
rhodesa Posted February 11, 2008 Share Posted February 11, 2008 Ok...couple of things...I removed this code from the end of the form because it looked like it didn't belong: <br> <br> <br> <input type="checkbox" name="C3" value="ON"> I would like to receive monthly newletters <br> <br> I also changed the names of the checkboxes, here is the entire code that i tested and it works: <script type="text/javascript"> function validate_required(field,alerttxt) { if (!field.value.length) {alert(alerttxt);return false;} return true; } function length_value(field,len,alerttxt) { if (field.value.length !== len) {alert(alerttxt);return false;} return true; } function validate_form(thisform) { with (thisform) { if (validate_required(fname,"First Name must be filled out!")==false) {fname.focus();return false;} else if (validate_required(lname,"Last Name must be filled out!")==false) {lname.focus();return false;} else if (validate_required(title,"Title must be filled out!")==false) {title.focus();return false;} else if (validate_required(title2,"Company must be filled out!")==false) {title2.focus();return false;} else if (notify_info.checked || notify_news.checked) { if( validate_required(email,"email2 must be filled out!")==false) {email.focus();return false;} } else if (validate_required(phone1,"Phone Box 1 must be filled out!")==false) {phone1.focus();return false;} else if (length_value(phone1,3,"Phone Box must be in this format: 000-0000-000")==false) {phone1.focus();return false;} else if (validate_required(phone2,"Phone Box 2 must be filled out!")==false) {phone2.focus();return false;} else if (validate_required(phone3,"Phone Box 3 must be filled out!")==false) {phone3.focus();return false;} } alert('done'); return false; } </script> <form action="mail.php" onsubmit="return validate_form(this)" name="frm" method="post"> <br> <table width="469" border="0" cellpadding="0" cellspacing="0"> <!--DWLayoutTable--> <tr> <td width="129" height="19" valign="top">First Name: </td> <td colspan="3" valign="top"><input type="text" name="fname" size="32" class="txtinput" id="fname"> <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td width="5"></td> </tr> <tr> <td height="19" valign="top">Last Name: </td> <td colspan="3" valign="top"><input type="text" name="lname" size="32" class="txtinput" id="lname"> <font color="#FF0000" face="Arial" size="2">*<br> <br> </font></td> <td></td> </tr> <tr> <td height="19" valign="top">Title: </td> <td colspan="3" valign="top"><input type="text" name="title" size="32" class="txtinput" id="title"> <font color="#FF0000" face="Arial" size="2"><br> <br> </font></td> <td></td> </tr> <tr> <td height="19" valign="top">Company Name: </td> <td colspan="3" valign="top"><input type="text" name="title2" size="32" class="txtinput" id="comp_name"> <br> <br></td> <td></td> </tr> <tr> <td height="19" valign="top">Email Address: </td> <td colspan="3" valign="top"><input type="text" name="email" size="32" class="txtinput" id="email"> <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td></td> </tr> <tr> <td height="19" valign="top">Telephone Number: </td> <td colspan="3" valign="top"><input type="text" name="phone1" size="5" class="txtinput" id="phone1" maxlength="3"> - <input type="text" name="phone2" size="5" class="txtinput" id="phone2" maxlength="3"> - <input type="text" name="phone3" size="5" class="txtinput" id="phone3" maxlength="4"> <input type="hidden" name="phone" size="5" class="txtinput" id="phone" > <b><font color="#FF0000" face="Arial" size="2">*<br> <br> </font></b></td> <td></td> </tr> <tr> <td height="19" valign="top">Best time to call: </td> <td colspan="3" valign="top"> Between <select class="txtinput" id="Time1" name="Time1"> <option selected>8:00 AM</option> <option>9:00 AM</option> <option>10:00 AM</option> <option>11:00 AM</option> <option>12:00 PM</option> <option>1:00 PM</option> <option>2:00 PM</option> <option>3:00 PM</option> <option>4:00 PM</option> <option>5:00 PM</option> <option>6:00 PM</option> </select> and <select class="txtinput" id="Time2" name="Time2"> <option selected>8:00 AM</option> <option>9:00 AM</option> <option>10:00 AM</option> <option>11:00 AM</option> <option>12:00 PM</option> <option>1:00 PM</option> <option>2:00 PM</option> <option>3:00 PM</option> <option>4:00 PM</option> <option>5:00 PM</option> <option>6:00 PM</option> </select> <select class="txtinput" id="Time3" name="Time3"> <option selected>Eastern</option> <option>Central</option> <option>Mountain</option> <option>Pacific</option> <option>Alaskan</option> <option>Hawaiian</option> </select> <br> <br> </td> <td></td> </tr> <tr> <td height="19" valign="top">Message: </td> <td colspan="3" valign="top"><textarea rows="4" name="msg" cols="40" id="msg" class="txtinput"></textarea> <br> <br></td> <td></td> </tr> <tr > <td colspan=4><br> <input type="checkbox" name="notify_info" value="ON"> I would like to receive more info on project offerings and investor briefings<br> <br> <input type="checkbox" name="notify_news" value="ON"> I would like to receive monthly newsletters<br> <br> <input type="checkbox" name="notify_package" value="ON"> Please send me an information package by mail to the following address:<br> <br> <td></td> <tr> <td height="19" valign="top"><div align="right">Address Line 1: <br> </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name" size="32" class="txtinput" id="comp_name"> <br> <br> </td> <td></td> </tr> <tr> <td height="23" valign="top"><div align="right"> <p>Address Line 2: </p> </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2"> <br> <br></td> <td></td> </tr> <tr> <td height="27" valign="top"><div align="right"> City: </div></td> <td colspan="3" valign="top"><input type="text" name="comp_name2" size="32" class="txtinput" id="comp_name2"> </td> <td></td> </tr> <tr> <td height="26" valign="top"> <div align="right">State: </div></td> <td width="80" valign="top"> <select name="State" class="txtinput" id="State"> <option value="Alabama" selected="selected">AL</option> <option value="Alaska">AK</option> <option value="Arizona">AZ</option> <option value="Arkansas">AR</option> <option value="California">CA</option> <option value="Colorado">CO</option> <option value="Connecticut">CT</option> <option value="Delaware">DE</option> <option value="District of Columbia">DC</option> <option value="Florida">FL</option> <option value="Georgia">GA</option> <option value="Hawaii">HI</option> <option value="Idaho">ID</option> <option value="Illinois">IL</option> <option value="Indiana">IN</option> <option value="Iowa">IA</option> <option value="Kanasas">KS</option> <option value="Kentucky">KY</option> <option value="Louisiana">LA</option> <option value="Maine">ME</option> <option value="Maryland">MD</option> <option value="Massachusetts">MA</option> <option value="Michigan">MI</option> <option value="Minnesota">MN</option> <option value="Mississippi">MS</option> <option value="Missouri">MO</option> <option value="Montana">MT</option> <option value="Nebraska">NE</option> <option value="Nevada">NV</option> <option value="New Hampshire">NH</option> <option value="New Jersey">NJ</option> <option value="New Mexico">NM</option> <option value="New York">NY</option> <option value="North Carolina">NC</option> <option value="North Dakota">ND</option> <option value="Ohio">OH</option> <option value="Oklahoma">OK</option> <option value="Oregon">OR</option> <option value="Pennsylvania">PA</option> <option value="Rhode Island">RI</option> <option value="South Carolina">SC</option> <option value="South Dakota">SD</option> <option value="Tennessee">TN</option> <option value="Texas">TX</option> <option value="Utah">UT</option> <option value="Vermont">VT</option> <option value="Virginia">VA</option> <option value="Washington">WA</option> <option value="West Virginia">WV</option> <option value="Wisconsin">WI</option> <option value="Wyoming">WY</option> </select> </td> <td width="52" valign="top">Zipcode</td> <td width="203" valign="top"><input type="text" name="comp_name2" size="9" class="txtinput" id="comp_name2"></td> <td></td> </tr> <tr> <td height="64" colspan=4 valign="top"> <div align="center"> <br> <br> <input type="submit" value="Submit" name="B1" class="txtinput"> <input type="reset" value="Reset" name="B2" class="txtinput"> <br> </div> <td></td> </tr> </table> </form> Quote Link to comment Share on other sites More sharing options...
phpSensei Posted February 11, 2008 Author Share Posted February 11, 2008 Life Saver, Thankyou so much young one (sensei talk). Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.