Jump to content

Checkbox Count Script


Recommended Posts

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.

Edited by dsonesuk
Link to post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...