Validating checkboxes by value

geewhiz · 05-03-2006, 07:28 PM

I found some simple code to get a better understanding of validating checkboxes. It validates the checkboxs by their name. Is it possible to validate the checkboxes with the same name but different values? The name of the checkboxes will be an array containing the values of the checkboxes selected.
I have my html like so:

Code:

<input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this)">
<input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this)">
<input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this)">

And the javascript where I edited "box1=", "box2=", "box3=" is like so:

Code:

function countChoices(obj) {
max = 2;

box1 = obj.form.1.checked;
box2 = obj.form.2.checked;
box3 = obj.form.3.checked;

count = (box1 ? 1 : 0) + (box2 ? 1 : 0) + (box3 ? 1 : 0);

if (count > max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
obj.checked = false;
   }
}

How do I correctly create box1, box2, box3, in this case?

vwphillips · 05-03-2006, 07:53 PM

names with characters [ or ] cannot be checked using std methods

so use document.getElementsByName(obj.name);

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--

function countChoices(obj,max){
 var cbs=document.getElementsByName(obj.name);
 var cnt=[];
 for (var zxc0=0;zxc0<cbs.length;zxc0++){
  if (cbs[zxc0].checked){ cnt.push(cbs[zxc0]); }
 }
 if (cnt.length>max){
  alert('Too Many');
  obj.checked=false;
  return false;
 }
 return true;
}


//-->
</script></head>

<body>
<input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this,2)">
<input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this,2)">
<input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this,2)">



</body>

</html>

geewhiz · 05-03-2006, 08:45 PM

Its beautiful! I've been playing with my code for hours and only errors. Time to disect this and see how it is working. Thanks much!

geewhiz · 05-03-2006, 10:06 PM

Well lets say that some of the values stored in "stuff[]" are for different questions. Like so:

Code:

<body>
<input type="checkbox" name="stuff[]" value="1" onClick="countChoices1(this,2)"/>
<input type="checkbox" name="stuff[]" value="2" onClick="countChoices1(this,2)"/>
<input type="checkbox" name="stuff[]" value="3" onClick="countChoices1(this,2)"/>

<input type="checkbox" name="stuff[]" value="4" onClick="countChoices2(this,3)"/>
<input type="checkbox" name="stuff[]" value="5" onClick="countChoices2(this,3)"/>
<input type="checkbox" name="stuff[]" value="6" onClick="countChoices2(this,3)"/>
<input type="checkbox" name="stuff[]" value="7" onClick="countChoices2(this,3)"/>
</body>

If the values=4-7 are for a different question, I created another javascript instance, countChoices2, for sending a different max. The new max is being sent correctly but it is still holding the values from "countChoice1" because I am allow to pick 2 checkboxes from the first question and only 1 addition from the second question.

I set function countChoices2 like this to try to clear any previous instances:

Code:

<script language="JavaScript" type="text/javascript">
<!--
function countChoices2(obj,max){
 var cbs=0;
 var cbs=document.getElementsByName(obj.name);
 var cnt=0;
 var cnt=[];
 for (var zxc0=0;zxc0<cbs.length;zxc0++){
  if (cbs[zxc0].checked){ cnt.push(cbs[zxc0]); }
 }
 if (cnt.length>max){
  alert('Only 3');
  obj.checked=false;
  return false;
 }
 return true;
}
//-->
</script>

vwphillips · 05-03-2006, 10:31 PM

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
  <title></title>
<script language="JavaScript" type="text/javascript">
<!--
function countChoices(zxcobj,max,grp){
 if (!window[grp]){ window[grp]=[]; }
 if (!zxcobj.set){ zxcobj.set=true; window[grp].push(zxcobj); }
 var cnt=[];
 for (var zxc0=0;zxc0<window[grp].length;zxc0++){
  if (window[grp][zxc0].checked){ cnt.push(window[grp][zxc0]); }
 }
 if (cnt.length>max){
  alert('Too Many in Group '+grp);
  zxcobj.checked=false;
  return false;
 }
 return true;
}


//-->
</script>
</head>

<body>
<body>
<input type="checkbox" name="stuff[]" value="1" onClick="countChoices(this,2,'grp1')"/>
<input type="checkbox" name="stuff[]" value="2" onClick="countChoices(this,2,'grp1')"/>
<input type="checkbox" name="stuff[]" value="3" onClick="countChoices(this,2,'grp1')"/>
<br>
<input type="checkbox" name="stuff[]" value="4" onClick="countChoices(this,3,'grp2')"/>
<input type="checkbox" name="stuff[]" value="5" onClick="countChoices(this,3,'grp2')"/>
<input type="checkbox" name="stuff[]" value="6" onClick="countChoices(this,3,'grp2')"/>
<input type="checkbox" name="stuff[]" value="7" onClick="countChoices(this,3,'grp2')"/>
</body>
</body>

</html>

geewhiz · 05-04-2006, 01:05 AM

Interesting code. Very helpful. Thanks much!