how to limit the number of checkboxes a user can check? 1

jhherring · Jun 28, 2005

OK . . . .

I have a form with about 200 checkboxes, but the user must be limited to checking exactly 8 of them.

If the user chooses fewer than 8, and tries to submit the form, he/she should see a prompt (preferably appearing in a frame) saying "You haven't chosen 8 options yet. Choose X more." This could be a simple alert, if posting it to a frame poses problems.

If the user checks 8 boxes, and then tries to choose a ninth option, he/she should see a message (preferably appearing in a frame) saying "You cannot choose more than 8 options. If you want to change your choices, go back and uncheck at least one choice and choose another option. Then submit the form." This could be a simple alert, if posting it to a frame poses problems.

Ideally, there would be a VISIBLE running count of options chosen, and another counting down the ones remaining. All of this would appear in a frame, so the user could keep track at all times of how many options have been chosen so far, and how many remain.

I'm fairly sure this kind of thing can be done, but I don't see anything along these lines in the Javascript forum yet. I have looked, but (as usual) my particular needs are just different enough from those of others to make me have to ask for help. (I was able to get one other problem solved here tonight WITHOUT having to ask for your help -- Tek Tips forums make life so much easier!)

Thanks for whatever help you can provide. The people who respond in these forums generally know their stuff.

vbkris · Jun 29, 2005

TheCheckBox=document.forms[0].CheckBoxName

Counter=0
for(i=0;i<TheCheckBox.count;i++)
{
if(TheCheckBox.checked)
Counter++
}

alert("Checked: "+Counter)

the above script will give u a count of checked checkboxes. use it in the onclick event of the checkbox. i am assuming that all the checkboxes have the same name...

Known is handfull, Unknown is worldfull

jhherring · Jun 29, 2005

Well, first, let me say thanks for answering. However . . . .

While I can see that your code will keep up with how many checkboxes have been checked, I don't see any mechanism for PREVENTING users from choosing more than 8 items, or for preventing them from submitting the form with fewer than 8 items checked. Unfortunately, this is a requirement I can't fudge.

It would also be nice if a running count of checkboxes selected could be displayed somewhere on the page, rather than as an alert that pops up whenever any checkbox is chosen.

But thanks very much for your contribution!

adam0101 · Jun 29, 2005

Like this?

Code:

<html>
<head>
<script language="JavaScript">
function chk(){
  var count=numChecked();
  if(count > 8){
    showStatus("You cannot choose more than 8 options. If you want to change your choices, go back and uncheck at least one choice and choose another option. Then submit the form.")
  }else{
    showStatus("Number checked: "+ count);
  }
  return count<=8;
}

function chk2(f){
  var count=numChecked();
  if(count<8){
    showStatus("You haven't chosen 8 options yet. Choose " + (8-count) + " more.");
    return false;
  }else{
    return true;
  }
}

function numChecked(){
  var chks=document.getElementsByName("myChecks"),count=0;
  for(var i=0;i<chks.length;i++){
    if(chks[i].checked) count++;
  }
  return count;
}

function showStatus(msg){
  document.getElementById("chkStatus").innerHTML=msg;
}
</script>
</head>
<body>
<form onsubmit="return chk2(this)">
<input type="checkbox" name="myChecks" value="1" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="2" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="3" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="4" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="5" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="6" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="7" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="8" onclick="return chk()" />
<input type="checkbox" name="myChecks" value="9" onclick="return chk()" /><br>
<input type="submit" value="Submit">
<div id="chkStatus"></div>
</form>
</body>
</html>

Adam

jhherring · Jun 29, 2005

Unbelievable! This is amazing! This is why I come back to Tek-Tips -- for the best advice out there!

I've only tested it briefly, but it looks like exactly what I need. You're a genius!

It seems inadequate to say just "thanks," but thanks anyway! You've solved a big headache for me!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

how to limit the number of checkboxes a user can check? 1

jhherring

Programmer

vbkris

Programmer

jhherring

Programmer

adam0101

Programmer

jhherring

Programmer

Similar threads

Part and Inventory Search

Sponsor