JavaScript not working

[westman]

i am trying to get no more than 6 check boxes checked at one timethis is what i have....

function chkcontrol(j) {var total=0;for(var i=0; i < document.form1.number.length; i++){if(document.form1.number[i].checked){total =total +1;}if(total > 6){alert("maximum of 6")document.form1.number[j].checked = false ;return false;}}}

<input type="checkbox" name="1" id="present" value="yes" onclick="chkcontrol(0)"><input type="checkbox" name="2" id="present" value="yes" onclick="chkcontrol(1)"><input type="checkbox" name="3" id="present" value="yes" onclick="chkcontrol(2)"> and so on.... its not working any help?

[justsomeguy]

What is document.form1.number supposed to contain? Are you checking for Javascript errors?

[thescientist]

also, it is best practice to use actual DOM methods to get references to elements, which could one or a combination of methods like document.getElementById or document.getElementsByTagName. dot notation, in other words, is bad practice. aside from that, we have no semblance of your markup, so that should definitely be included, and obviously, as JSG pointed out, checking for JS errors should be top of your list of debugging steps.

[westman]

document.form1.number is not on my page i just copied and pasted the script and now trying to make it work i have no Javascript errors running and i don't know DOM methods. any help with a simple solution?

[dsonesuk]

document.form1.number represents the name given to form

<form name="form1">

document.form1.number represents the name or in this case a names applied to group of input checkboxes

<input type="checkbox" name="number" id="present0" value="1" onclick="chkcontrol(0)"><input type="checkbox" name="number" id="present1" value="2" onclick="chkcontrol(1)"><input type="checkbox" name="number" id="present2" value="3" onclick="chkcontrol(2)"><input type="checkbox" name="number" id="present3" value="4" onclick="chkcontrol(3)"><input type="checkbox" name="number" id="present4" value="5" onclick="chkcontrol(4)"><input type="checkbox" name="number" id="present5" value="6" onclick="chkcontrol(5)"><input type="checkbox" name="number" id="present6" value="7" onclick="chkcontrol(6)">

you cannot have identical id ref, they must be unique, also group of checkboxes using same name, should have different values, so you should have form similar to

<form name="form1"><input type="checkbox" name="number" id="present0" value="1" onclick="chkcontrol(0)"><input type="checkbox" name="number" id="present1" value="2" onclick="chkcontrol(1)"><input type="checkbox" name="number" id="present2" value="3" onclick="chkcontrol(2)"><input type="checkbox" name="number" id="present3" value="4" onclick="chkcontrol(3)"><input type="checkbox" name="number" id="present4" value="5" onclick="chkcontrol(4)"><input type="checkbox" name="number" id="present5" value="6" onclick="chkcontrol(5)"><input type="checkbox" name="number" id="present6" value="7" onclick="chkcontrol(6)"></form>

[thescientist]

here's an example using the DOM methods I was talking abouthttp://jsfiddle.net/5gHRW/1/ HTML

<form>  <input type="checkbox" name="number" value="1" onclick="chkcontrol()">  <input type="checkbox" name="number" value="2" onclick="chkcontrol()">  <input type="checkbox" name="number" value="3" onclick="chkcontrol()">  <input type="checkbox" name="number" value="4" onclick="chkcontrol()">  <input type="checkbox" name="number" value="5" onclick="chkcontrol()">  <input type="checkbox" name="number" value="6" onclick="chkcontrol()">  <input type="checkbox" name="number" value="7" onclick="chkcontrol()"></form>

JS

var chkcontrol = function () {	var numChecked = 0;	var checkBoxes = document.getElementsByTagName('input');  //note I would put this line outside the function,  since you shouldn't be doing this everytime the function runs		for(var i = 0, l = checkBoxes.length; i < l; i++){		var box = checkBoxes[i];				if(box.checked){			numChecked += 1;		}				if(numChecked > 6){			alert("maximum of 6");  //unless you are specifically trying to alert the user, a better debugging method is to use console.log			box.checked = false;			return false;		}	}};

Edited October 12, 2012 by thescientist

[dsonesuk]

Almost, you need to uncheck the 7th checkbox that was selected, NOT the very last of the group.

<form>  <input type="checkbox" name="number" value="1" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="2" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="3" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="4" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="5" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="6" onclick="chkcontrol(this)">  <input type="checkbox" name="number" value="7" onclick="chkcontrol(this)"></form>

var chkcontrol = function (elem) {	    var numChecked = 0;	    var checkBoxes = document.getElementsByTagName('input');  //note I would put this line outside the function,  since you shouldn't be doing this everytime the function runs	    	    for(var i = 0, l = checkBoxes.length; i < l; i++){			    var box = checkBoxes[i];			    			    if(box.checked){					    numChecked += 1;			    }			    			    if(numChecked > 6){					    alert("maximum of 6");					    elem.checked = false;					    return false;			    }	    }};

[thescientist]

ah right. good catch.

[dsonesuk]

Since this is BROWSER SCRIPTING -> JAVASCRIPT, your post is not really relevant, is it.

[thescientist]

yes these all answers are correct you can see this site php den for reference.

why?

[westman]

i like your script but i dose not work for my phpthe check box name has to be diffident for all check boxes like.... <inputtype="checkbox"name="1"value="yes"onclick="chkcontrol(this)"> <input type="checkbox" name="2" value="yes" onclick="chkcontrol(this)"> <input type="checkbox" name="3" value="yes" onclick="chkcontrol(this)">is there a way?

Edited October 13, 2012 by westman

[thescientist]

why don't you just try it? changes the names to whatever you need.

[dsonesuk]

Then the DOM example would still work, it does not look for name attribute value, unlike the dot notation example you provided, but just 'input' html tag itself (may need to filter this to type=="checkbox"), and you can't or should not use just a number for the value of name attribute, it should start with letter.

[westman]

thank you so much it works fine again thank you