PDA

View Full Version : limit checkbox

autumnnn
08-12-2002, 02:42 AM
Hi,

I would like to present say 10 checkboxes on a page but only allow say 5 from these 10 to be selected. I would like to alert if the user selects more than 5 and nother if he/she submits before selecting less that 5.

thanks
Autumnnn
adios
08-12-2002, 03:38 AM
autumnnnnnnnn.......


<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

function enough(limit, validate) {
var el, msg = '', howmany = 0;
for (var i=0; i<document.forms[0].elements.length; ++i) {
el = document.forms[0].elements[i];
if (el.type == 'checkbox' && el.checked) ++howmany;
}
msg +=
(howmany>limit) ?
'Please check only ' + limit + ' of the boxes, my friend.' :
(validate && howmany != limit) ?
'Please check at least ' + limit + ' of the boxes, my friend.' :
'';
if (msg) {
alert(msg);
return false;
}
return true;
}

</script>
</head>
<body>
<form onsubmit="return enough(5, true)">
<input type="checkbox" onclick="return enough(5)">1<br>
<input type="checkbox" onclick="return enough(5)">2<br>
<input type="checkbox" onclick="return enough(5)">3<br>
<input type="checkbox" onclick="return enough(5)">4<br>
<input type="checkbox" onclick="return enough(5)">5<br>
<input type="checkbox" onclick="return enough(5)">6<br>
<input type="checkbox" onclick="return enough(5)">7<br>
<input type="checkbox" onclick="return enough(5)">8<br>
<input type="checkbox" onclick="return enough(5)">9<br>
<input type="checkbox" onclick="return enough(5)">10<br><br>
<input type="submit">
</form>
</body>
</html>
justame
08-12-2002, 03:39 AM
aut...
heres how jkd (just a one® of the smartest mods..lol...) did it to just a permit® 7 outta 9...
it should get ya just a started® :O))) goodluck...


<form name="myform" action="bla">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
<input type="checkbox" name="checker">
</form>

<script>
<!--//
function validateIt() {
checkCount=0
for (i=0;i<=9;i++) {
if (document.myform.checker[i].checked) {
checkCount++
}
}
if (checkCount==6) {
document.forms.myform.submit()
}
else if (checkCount!=6) {
alert("You can only select 7 options.")
}
}
//-->
</script>
jkd
08-12-2002, 03:48 AM
Dunno where you dug that up from Justame (must have been from way back on the WA forum...) :D, but it's only useful for client side purposes. It looks to me that Adios's code is more versatile for submitting the form information. :)
adios
08-12-2002, 04:01 AM
Actually, it's limited to one-form pages (OK by me) but also disallows any other unrelated checkboxes (not OK).
Better:


<html>
<head>
<title>untitled</title>
<script type="text/javascript" language="javascript">

var enoughboxes = new Array( //names of boxes to be checked
'box1','box2','box3','box4','box5','box6',
'box7','box8','box9','box10'
);

function enough(limit, validate) {
var el, e = 0, msg = '', howmany = 0;
while (enoughboxes[e]) {
el = document.forms[0][enoughboxes[e++]];
if (el.type == 'checkbox' && el.checked) ++howmany;
}
msg +=
(howmany>limit) ?
'Please check only ' + limit + ' of the boxes, my friend.' :
(validate && howmany != limit) ?
'Please check at least ' + limit + ' of the boxes, my friend.' :
'';
if (msg) {
alert(msg);
return false;
}
return true;
}

</script>
</head>
<body>
<form onsubmit="return enough(5, true)">
<input name="otherbox" type="checkbox">buzzoff<br>
<input name="otherbox" type="checkbox">buzzoff<br>

<input name="box1" type="checkbox" onclick="return enough(5)">1<br>
<input name="box2" type="checkbox" onclick="return enough(5)">2<br>
<input name="box3" type="checkbox" onclick="return enough(5)">3<br>
<input name="box4" type="checkbox" onclick="return enough(5)">4<br>
<input name="box5" type="checkbox" onclick="return enough(5)">5<br>
<input name="box6" type="checkbox" onclick="return enough(5)">6<br>
<input name="box7" type="checkbox" onclick="return enough(5)">7<br>
<input name="box8" type="checkbox" onclick="return enough(5)">8<br>
<input name="box9" type="checkbox" onclick="return enough(5)">9<br>
<input name="box10" type="checkbox" onclick="return enough(5)">10<br><br>
<input type="submit">
</form>
</body>
</html>
kraftomatic
01-28-2005, 04:36 PM
What if my checkboxes look like this:

<input type="checkbox" name="bonusQ10" value="q10_1" class="textbox" onclick="return enough(5)">

<input type="checkbox" name="bonusQ10" value="q10_2" class="textbox" onclick="return enough(5)"><br>

<input type="checkbox" name="bonusQ10" value="q10_3" class="textbox" onclick="return enough(5)"><br>

<input type="checkbox" name="bonusQ10" value="q10_4" class="textbox" onclick="return enough(5)"> <br>

<input type="checkbox" name="bonusQ10" value="q10_5" class="textbox" onclick="return enough(5)"><br>

Same name, but different values - I should be able to use that to determine only 5 selected checkboxes shouldn't I?

Thanks.