select Number of Check boxes then check if all are choosen

[mrsocks]

Hi,

i have a need to be able to allow a person to select an item that has a few choices.

product A has 3 different options (allowing you to choose 3-9 of 12 different months)
the first option is to be able to choose 3 months, the second is to b able to choose 6 months and the last is to be able to choose 9 months.

i need the form to check which number of months has been choosen (3, 6, 9) and then check to see if any months have been choosen at all (then to make sure people are not seleceting too many)

i would also like the choices to be an array and not pererate choices. the number of boxes checked script i am using now only checks the differnt bumber of itmes checked and not allows them to be an array.

right now i am using the following code to check the number checked (but not if that many have been checked)

i dont mind if it unckecks all when it counts them and has too many, but i want to make sure that it tells the user that they havent checked enough either.

thank you in advance for any contributions.
-----------------------------------


<script LANGUAGE="JavaScript">
<!-- Begin
function countChoices(obj) {
max = 4; // max. number allowed at a time

jan = obj.form.jan.checked; // checkboxes here
feb = obj.form.feb.checked;
mar = obj.form.mar.checked;
apr = obj.form.apr.checked;
may = obj.form.may.checked;
jun = obj.form.jun.checked;
jul = obj.form.jul.checked;
aug = obj.form.aug.checked;
sep = obj.form.sep.checked;
oct = obj.form.oct.checked;
nov = obj.form.nov.checked;
dec = obj.form.dec.checked;

count = (jan ? 1 : 0) + (feb ? 1 : 0) + (mar ? 1 : 0) + (apr ? 1 : 0) + (may ? 1 : 0) + (jun ? 1 : 0) + (jul ? 1 : 0) + (aug ? 1 : 0) + (sep ? 1 : 0) + (oct ? 1 : 0) + (nov ? 1 : 0) + (dec ? 1 : 0);
// If you have more checkboxes on your form
// add more (box_ ? 1 : 0) 's separated by '+'

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

<br>

<center>
<form>
Please choose up to 4 sections:
<br>
<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td align="left"><input type=checkbox name=jan value=1 onClick="countChoices(this)">January</td>
<td align="left"><input type=checkbox name=feb value=2 onClick="countChoices(this)">February</td>

<td align="left"><input type=checkbox name=mar value=3 onClick="countChoices(this)">March</td>
<td align="left"><input type=checkbox name=apr value=4 onClick="countChoices(this)">April</td>
<td align="left"><input type=checkbox name=may value=5 onClick="countChoices(this)">May</td>
<td align="left"><input type=checkbox name=jun value=6 onClick="countChoices(this)">June</td>
</tr>
<tr>
<td align="left"><input type=checkbox name=jul value=7 onClick="countChoices(this)">July</td>

<td align="left"><input type=checkbox name=aug value=8 onClick="countChoices(this)">August</td>
<td align="left"><input type=checkbox name=sep value=9 onClick="countChoices(this)">September</td>
<td align="left"><input type=checkbox name=oct value=10 onClick="countChoices(this)">October</td>
<td align="left"><input type=checkbox name=nov value=11 onClick="countChoices(this)">November</td>
<td align="left"><input type=checkbox name=dec value=12 onClick="countChoices(this)">December</td>
</tr>

</table>

-----------------------------------

[Fang]

loop through your form elements like this (http://forums.webdeveloper.com/showthread.php?s=&threadid=17285)

[mrsocks]

i have this working (by hard coding in the amount of choises they are to be able to choose)

but it only tells me that i need to make more choices when i have already clicked one. if i dont have any clicked, it goes though

-----------------
<script LANGUAGE="JavaScript">
<!-- Begin

function submitAction(countC)
{
maxC = 4; // max. number allowed at a time

if (countC < maxC || countC == NULL)
{
alert("You need to choose up to " + max + " choices.");
return false;
}
}


function countChoices(obj) {
max = 4; // max. number allowed at a time

jan = obj.form.jan.checked; // checkboxes here
feb = obj.form.feb.checked;
mar = obj.form.mar.checked;
apr = obj.form.apr.checked;
may = obj.form.may.checked;
jun = obj.form.jun.checked;
jul = obj.form.jul.checked;
aug = obj.form.aug.checked;
sep = obj.form.sep.checked;
oct = obj.form.oct.checked;
nov = obj.form.nov.checked;
dec = obj.form.dec.checked;

count = (jan ? 1 : 0) + (feb ? 1 : 0) + (mar ? 1 : 0) + (apr ? 1 : 0) + (may ? 1 : 0) + (jun ? 1 : 0) + (jul ? 1 : 0) + (aug ? 1 : 0) + (sep ? 1 : 0) + (oct ? 1 : 0) + (nov ? 1 : 0) + (dec ? 1 : 0);
// If you have more checkboxes on your form
// add more (box_ ? 1 : 0) 's separated by '+'

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

<br>

<center>
<form>
Please choose up to 4 sections:
<br>
<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td align="left"><input type=checkbox name=jan value=1 onClick="countChoices(this)">January</td>
<td align="left"><input type=checkbox name=feb value=2 onClick="countChoices(this)">February</td>

<td align="left"><input type=checkbox name=mar value=3 onClick="countChoices(this)">March</td>
<td align="left"><input type=checkbox name=apr value=4 onClick="countChoices(this)">April</td>
<td align="left"><input type=checkbox name=may value=5 onClick="countChoices(this)">May</td>
<td align="left"><input type=checkbox name=jun value=6 onClick="countChoices(this)">June</td>
</tr>
<tr>
<td align="left"><input type=checkbox name=jul value=7 onClick="countChoices(this)">July</td>

<td align="left"><input type=checkbox name=aug value=8 onClick="countChoices(this)">August</td>
<td align="left"><input type=checkbox name=sep value=9 onClick="countChoices(this)">September</td>
<td align="left"><input type=checkbox name=oct value=10 onClick="countChoices(this)">October</td>
<td align="left"><input type=checkbox name=nov value=11 onClick="countChoices(this)">November</td>
<td align="left"><input type=checkbox name=dec value=12 onClick="countChoices(this)">December</td>
</tr>

</table>

</form>

[Fang]

<script type="text/javascript">
<!--
function countChoices(f) {
var max = 4; // max. number allowed at a time
var count=0;
for(var i=0; i<f.length; i++) {
if(f.elements[i].type=="checkbox" && f.elements[i].checked==true) {
count++;
}
}
if (count > max) {
alert("You can only choose up to " + max + " choices! \nUncheck an option if you want to pick another.");
f.reset(); //uncheck all boxes
return;
}
if (count==0) {
alert("You need to choose up to " + max + " choices.");
return;
}
alert("Options within limits");
}
//-->
</script>

</head>
<body>
<br>
<div align="center">
<form action="#" name="myform" onsubmit="countChoices(this); return false;">
Please choose up to 4 sections:
<br>
<table cellpadding="6" cellspacing="0" border="0">
<tr>
<td align="left"><input type="checkbox" name="jan" value="1" />January</td>
<td align="left"><input type="checkbox" name="feb" value="2" />February</td>
<td align="left"><input type="checkbox" name="mar" value="3" />March</td>
<td align="left"><input type="checkbox" name="apr" value="4" />April</td>
<td align="left"><input type="checkbox" name="may" value="5" />May</td>
<td align="left"><input type="checkbox" name="jun" value="6" />June</td>
</tr>

<tr>
<td align="left"><input type="checkbox" name="jul" value="7" />July</td>
<td align="left"><input type="checkbox" name="aug" value="8" />August</td>
<td align="left"><input type="checkbox" name="sep" value="9" />September</td>
<td align="left"><input type="checkbox" name="oct" value="10" />October</td>
<td align="left"><input type="checkbox" name="nov" value="11" />November</td>
<td align="left"><input type="checkbox" name="dec" value="12" />December</td>
</tr>
</table>
<button type="submit">submit</button>
</form>
</div>