PDA

Click to See Complete Forum and Search --> : Checkbox problem

rjra2
07-09-2003, 03:02 PM
I'm trying to validate a simple form to ONLY allow a user to check 2 of the 4 checkboxes.

Please help with the code!
Thanks


<script type='text/javascript'>
<!-- //
function calc(){
var count=0;
for(i=1; i<document.myForm.elements.length; i++){
if(document.myForm.elements[i].type=="checkbox" && document.myForm.elements[i].checked==true){
count+=1;
}
}
if(count>2){alert("Check only two, please."); return false;}
}
//-->
</script></head>
<body>
<form action="" name="myForm" onsubmit="return calc();"><div>
c1 <input type="checkbox" name="c1"><br>
c2 <input type="checkbox" name="c2"><br>
c3 <input type="checkbox" name="c3"><br>
c4 <input type="checkbox" name="c4"><br>
<input type="submit" value="Submit">
</div></form>
</body></html>
David Harrison
07-09-2003, 03:18 PM
why not just use:
if(count!=2){return false;}
rjra2
07-09-2003, 03:24 PM
I tried it and it allows 3 of the checkboxes to process the form?

I need only 2 or 1 to proceed.
David Harrison
07-09-2003, 03:26 PM
In that case why not try:
if(count!=1){return false;}
rjra2
07-09-2003, 03:34 PM
I'm not sure what's going on with this simple code.
I tried the last suggestion and when i first select all four checkboxes and hit submit it pops up the alert box; thats great. I uncheck c1 and c3 and hit submit and I still get the alert box. I can get it to work by checking multiple boxes.
Works/does not work????

I still confused.
h_monteiro
07-09-2003, 03:36 PM
<html>
<head>
<script>
function validate(){
var counter=0;
for(var i=0; i<=document.forms[0].length-1;i++){
if(document.forms[0].elements[i].checked){
counter=counter+1;
if(counter>2){
document.forms[0].elements[i].checked=false;
alert("Select only two checkboxes! Uncheck one box to select another.");
}
}//end of if loop
}//end of for loop
}//end of validate()
</script>
</head>
<body>
<form>
<INPUT TYPE="checkbox" NAME="a" onclick="validate()">
<INPUT TYPE="checkbox" NAME="b" onclick="validate()">
<INPUT TYPE="checkbox" NAME="c" onclick="validate()">
<INPUT TYPE="checkbox" NAME="d" onclick="validate()">
</form>
</body>
</html>

Paste the above code into a new text file and save it with a .htm extension.

Let me know how it works?
Horacio
David Harrison
07-09-2003, 03:39 PM
you would need an else for this if:

if(document.forms[0].elements[i].checked){
counter++; ...

so that it lowers the counter by 1 (ie: else{counter--;}) if a checkbox is deselected.
rjra2
07-09-2003, 03:49 PM
h_monteiro's worked better than what I was trying to do with the other code.
Very clean!
Thanks for ALL help!
h_monteiro
07-09-2003, 04:08 PM
<html>
<head>
<script type='text/javascript'>
<!-- //
function calc(){
var count=0; //SET "i=0" BECAUSE AN ARRAY STARTS WITH [0]
for(i=0; i<document.myForm.elements.length-1; i++){
if(document.myForm.elements[i].type=="checkbox" && document.myForm.elements[i].checked==true){
count+=1;
}
}
if(count>2){//JUST CLEARING ALL THE CHECKBOXES
for(i=0; i<document.myForm.elements.length-1; i++){
document.myForm.elements[i].checked=false;
}
alert("Check only two, please.");
return false;}
}
//-->
</script></head>
<body>
<form action="" name="myForm" onsubmit="return calc();"><div>
c1 <input type="checkbox" name="c1"><br>
c2 <input type="checkbox" name="c2"><br>
c3 <input type="checkbox" name="c3"><br>
c4 <input type="checkbox" name="c4"><br>
<input type="submit" value="Submit">
</div></form>
</body></html>
*** Just a few changes to your code. If more than two selected than the alert appears and all the checkboxes are cleared.