westman Posted December 14, 2011 Share Posted December 14, 2011 i have<input name="submit" value="submit" type="submit" onclick="control()"> and need to check that 7 check boxes have been check before the form has been posted how would i write the java script for this? Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2011 Share Posted December 14, 2011 remove the onclick from submit button and use onsubmit="return control()" and give the form element a id ref <form id="MyForm" action="wherever.php" onsubmit="return control()"> Now! if you are targeting checkboxes have the same group name use just the 1st 'if condition' option, if they are of different group names and you want all selected choose '2nd if condition'. <script type="text/javascript">/*<![CDATA[*//*---->*/ function control(){ var valid= true; var obj= document.getElementById("MyForm"); for(i=0;i<obj.elements.length;i++) { /*if(obj.elements[i].name =='checkbox_group_name' && obj.elements[i].checked == false) { valid=false; break; }*/ if(obj.elements[i].type =='checkbox' && obj.elements[i].checked == false) { valid=false; break; } }return valid;}/*--*//*]]>*/</script> it loops through all form elements, and the if conditions check if they are of the same group name or type checkbox (depending which one you use) and if it is checked, if any checkbox is not checked, the loop is terminated and false is assigned to valid variable, this result is returned and prevents the form being submitted. Link to comment Share on other sites More sharing options...
westman Posted December 14, 2011 Author Share Posted December 14, 2011 its not working, the form still sends (page refreshes) when less than 7 check boxes are checked. the check boxes are... <input type="checkbox" name="number1" id="number" value="1" /><input type="checkbox" name="number2" id="number" value="1" /><input type="checkbox" name="number3" id="number" value="1" /><input type="checkbox" name="number4" id="number" value="1" />and so on... Link to comment Share on other sites More sharing options...
Ingolme Posted December 14, 2011 Share Posted December 14, 2011 You can't have more than one element with the same ID. The ID should be unique, the name can be the same. The following code will be supposing that the NAME attribute is "number" and the same for all the check boxes. If you want a minimum of 7, you'll have to loop through every checkbox and see that it's checked until you find 7 of them. If you exit the loop and there are still less than 7, return false. Basing on the code given earlier. var i;var count = 0;var valid = false;for(i = 0; i < obj.elements.length; i++) { if(obj.name == "number") { if(obj.elements[i].checked) { count++; } if(count == 7) { valid = true; break; } }} return valid; Link to comment Share on other sites More sharing options...
westman Posted December 14, 2011 Author Share Posted December 14, 2011 its still not working + i need to keep the name and id as it is due to the php Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2011 Share Posted December 14, 2011 Don't waste your time counting, just find out if any are not checked! your code should be similar to below <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function control(){var valid= true; var obj= document.getElementById("MyForm"); for(i=0;i<obj.elements.length;i++) { if(obj.elements[i].type =='checkbox' && obj.elements[i].checked == false) { valid=false; break; } }return valid;}/*--*//*]]>*/</script><style type="text/css"></style></head><body><form id="MyForm" action="wherever.php" onsubmit="return control()"><input type="checkbox" name="number1" id="number1" value="1" /><input type="checkbox" name="number2" id="number2" value="2" /><input type="checkbox" name="number3" id="number3" value="3" /><input type="checkbox" name="number4" id="number4" value="4" /><input type="checkbox" name="number5" id="number5" value="5" /><input type="checkbox" name="number6" id="number6" value="6" /><input type="checkbox" name="number7" id="number7" value="7" /><input type="submit" name="submit"/></form> </body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2011 Share Posted December 14, 2011 You CANNOT have multiple id with the same name, whether it is through php or not! Link to comment Share on other sites More sharing options...
westman Posted December 14, 2011 Author Share Posted December 14, 2011 i have over 40 check boxes with working java script on it to mack shore a user dose not select over 7... <input type="checkbox" name="number1" id="number" value="1" onclick="chkcontrol(0)" /><input type="checkbox" name="number2" id="number" value="1" onclick="chkcontrol(1)" /><input type="checkbox" name="number3" id="number" value="1" onclick="chkcontrol(2)" /> <script language="javascript" type="text/javascript">function chkcontrol(j) {var total=0;for(var i=0; i < document.form1.number.length; i++){if(document.form1.number.checked){total =total +1;}if(total > 7){alert("maximum of 7 numbers")document.form1.number[j].checked = false ;return false;}}}</script> the above will not work if the name and id was all different + my php works well with this all i need is the java scripted to tell the user they have not checked 7 Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2011 Share Posted December 14, 2011 Well the ref of 'document.form1' should be 'document.forms.form1' also the ref document.forms.form1.number (corrected) will reference the name OR id reference, it can find 'number1' through the name value so it will use that, if you used through the id ref, it would use that instead! what you should have <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function chkcontrol(j) {var total=0;for(var i=0; i < document.forms.form1.number.length; i++){if(document.forms.form1.number[i].checked){total =total +1;}if(total > 7){alert("maximum of 7 numbers")document.forms.form1.number[j].checked = false ;return false;}}}/*--*//*]]>*/</script><style type="text/css"></style></head><body><form id="form1" action="wherever.php" onsubmit="return control()"><input type="checkbox" name="number" id="number1" value="1" onclick="chkcontrol(0)" /><input type="checkbox" name="number" id="number2" value="1" onclick="chkcontrol(1)" /><input type="checkbox" name="number" id="number3" value="1" onclick="chkcontrol(2)" /><input type="checkbox" name="number" id="number4" value="1" onclick="chkcontrol(3)" /><input type="checkbox" name="number" id="number5" value="1" onclick="chkcontrol(4)" /><input type="checkbox" name="number" id="number6" value="1" onclick="chkcontrol(5)" /><input type="checkbox" name="number" id="number7" value="1" onclick="chkcontrol(6)" /><input type="checkbox" name="number" id="number8" value="1" onclick="chkcontrol(7)" /><input type="checkbox" name="number" id="number9" value="1" onclick="chkcontrol(8)" /><input type="submit" name="submit"/></form></body></html> Link to comment Share on other sites More sharing options...
dsonesuk Posted December 14, 2011 Share Posted December 14, 2011 to combine onclick checkbox validation, with onsubmit validation <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Untitled Document</title><script type="text/javascript">/*<![CDATA[*//*---->*/function chkcontrol(j) {var total=0;var valid=true;for(var i=0; i < document.forms.form1.number.length; i++) { if(document.forms.form1.number[i].checked) { total =total +1; } if(j !=-9999) { if(total > 7) { alert("maximum of 7 numbers") document.forms.form1.number[j].checked = false ; } } }if(j ==-9999 && total < 7) { valid=false; } return valid;}/*--*//*]]>*/</script><style type="text/css"></style></head><body><form id="form1" action="wherever.php" onsubmit="return chkcontrol(-9999)"><input type="checkbox" name="number" id="number1" value="1" onclick="chkcontrol(0)" /><input type="checkbox" name="number" id="number2" value="1" onclick="chkcontrol(1)" /><input type="checkbox" name="number" id="number3" value="1" onclick="chkcontrol(2)" /><input type="checkbox" name="number" id="number4" value="1" onclick="chkcontrol(3)" /><input type="checkbox" name="number" id="number5" value="1" onclick="chkcontrol(4)" /><input type="checkbox" name="number" id="number6" value="1" onclick="chkcontrol(5)" /><input type="checkbox" name="number" id="number7" value="1" onclick="chkcontrol(6)" /><input type="checkbox" name="number" id="number8" value="1" onclick="chkcontrol(7)" /><input type="checkbox" name="number" id="number9" value="1" onclick="chkcontrol(8)" /><input type="submit" name="submit"/></form></body></html> Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.