limit checkboxes in a form - boxes all differnent names

scotchegg78 · July 4, 2008

Hi guys

I am tryong to find some code to limit the checkboxes in a form when they are all the different names.

So instead i pass the form id and then run a count against this?

I have this but it dont work....

//initial checkCount of zero 
var checkCount=0 
//maximum number of allowed checked boxes 
var maxChecks=3 

function setChecks(obj){ 
//increment/decrement checkCount 
if(obj.checked){ 
checkCount=checkCount+1 
}else{ 
checkCount=checkCount-1 
} 
//if they checked a 4th box, uncheck the box, then decrement checkcount and pop alert 
if (checkCount>maxChecks){ 
obj.checked=false 
checkCount=checkCount-1 
alert('you may only choose up to '+maxChecks+' options') 
} 
}


..

<form name=\"topfriends\">
<INPUT TYPE=\"checkbox\" NAME=\"".$row["id"]."\ onclick=\"setItems(this.form)\">
<INPUT TYPE=\"checkbox\" NAME=\"".$row["id"]."\ onclick=\"setItems(this.form)\">
<INPUT TYPE=\"checkbox\" NAME=\"".$row["id"]."\ onclick=\"setItems(this.form)\">

</form>

(where row id can be any number from the dbase.)

thanks for any quick help..

Psycho · July 4, 2008

Well, I would first put the checkboxes in a div to group them. That way you can have other checkboxes on the form that are not part of the max count.

Second, you could just disable the remaining checkboxes once the user hits the max count.

<html>
<head>

<script type="text/javascript">

function setItems(checkObj) {

  var checkCount = 0;
  var maxChecks = 3;
  divObj = document.getElementById("checkGroup");

  //Determine the number of checked boxes
  for (var i=0; i<divObj.childNodes.length; i++)
  {
    if (divObj.childNodes[i].type=='checkbox'  && divObj.childNodes[i].checked)
    {
      checkCount++;
    }
  }

  //Enable/disable unchecked boxes
  for (var i=0; i<divObj.childNodes.length; i++)
  {
    if (divObj.childNodes[i].type=='checkbox' && !divObj.childNodes[i].checked)
    {
      divObj.childNodes[i].disabled = (checkCount==maxChecks);
    }
  }

}

</script>

</head>

<body>

<form name=\"topfriends\">
  <div id="checkGroup">
    1 <input type="checkbox" name="1" onclick="setItems(this.form);"><br>
    2 <input type="checkbox" name="2" onclick="setItems(this.form);"><br>
    3 <input type="checkbox" name="3" onclick="setItems(this.form);"><br>
    4 <input type="checkbox" name="4" onclick="setItems(this.form);"><br>
    5 <input type="checkbox" name="5" onclick="setItems(this.form);"><br>
  </div>
</form>

</body>

</html>

dyluck · July 28, 2008

Hmm this code is awesome mjdamato.

I have a question for anyone... is there a way to tweak this code such that it isn't dependant on a <DIV> but rather a commonly shared id="name" within the checkbox input string?

the reason im asking is, the checkboxes I want to put limiters on are mixed with checkboxes that do not require limiters. All of the boxes are within the same div table. To even make it more complicated, the boxes are dynamicly generated from a database query as an array and cannot have common or incremented value="" dependancies as well.

Thanks for your help!!

Psycho · July 29, 2008

Yes and no. First off you cannot have elements using the same ID. IDs must be uniqe. You could do something where you have id="name1", id="name2", etc.

To even make it more complicated, the boxes are dynamicly generated from a database query as an array and cannot have common or incremented value="" dependancies as well.

That's not true. YOU are the programmer, it would be VERY easy to do something like that. I don't know enough about your situation and data to give a comple solutino, but I can provide an example.

First off you need some way to determine which fields you need to run this script on. So, let's say for ALL the fields you are getting from the database you put in an identifier field for the ID. So, for these particular checkbox fields use a specific identifier, let's call it 'item'.

Well, you should have something in your code that is dynamically writing these fields to the page. Just insert some code to check if the identifier == 'item' if so use item plus the item counter as the id.

function displayfield($fieldData) {
    global $itemCount;
    $itemCount++;

    if ($fieldData['id'] = 'item') {
        $fieldData['id'].=$itemCount;
    }

    //rest of script to display the field
}

Then in the javascript function have the script simply iterrate through each field where the ID begins with 'item' until there are no more:

function setItems(checkObj) {

  var checkCount = 0;
  var maxChecks = 3;
  divObj = document.getElementById("checkGroup");

  var itemNum = 1;

  //Determine the number of checked boxes
  while (document.getElementById('item'+itemNum))
  {
    fieldObj = document.getElementById('item'+itemNum);
    if (fieldObj.checked)
    {
      checkCount++;
    }
    itemNum++;
  }

  var itemNum = 1;
  //Enable/disable unchecked boxes
  while (document.getElementById('item'+itemNum))
  {
    fieldObj = document.getElementById('item'+itemNum);
    if (fieldObj.checked)
    {
      fieldObj.disabled = (checkCount==maxChecks);
    }
    itemNum++;
  }

}

Note, this was a very quick edit I did not test or validate the above. This was only to give you a general idea of the process.

dyluck · July 29, 2008

That's not true. YOU are the programmer, it would be VERY easy to do something like that. I don't know enough about your situation and data to give a comple solutino, but I can provide an example.

Thanks for the motivation! This one was bugging me for a couple days. It's kind of funny, PHP difficult stuff I work through no problem, but javascript is slowly but surely coming to me.

I got the script to work. It was disabling the boxes with the checkmarks, so i just had to fix that. It works wonderfully.

<html>
<head>

<script type="text/javascript">

function setItems(checkObj) {

var checkCount = 0;
var maxChecks = 3;

var itemNum = 1;

//Determine the number of checked boxes
while (document.getElementById('item'+itemNum))
{
fieldObj = document.getElementById('item'+itemNum);
if (fieldObj.checked)
{
checkCount++;
}
itemNum++;
}

var itemNum = 1;
//Enable/disable unchecked boxes
while (document.getElementById('item'+itemNum))
{
fieldObj = document.getElementById('item'+itemNum);
if (!fieldObj.checked)
{
fieldObj.disabled = (checkCount==maxChecks);
}
itemNum++;
}
}

</script>
</head>
<body>

<form name=\"topfriends\">
1 <input type="checkbox" id="stream1"  name="1" value = "16"><br>
2 <input type="checkbox"  id="item1" name="sticky[]" value="1" onclick="setItems(this.form);"><br>
3 <input type="checkbox"  id="item2"  name="sticky[]" value="12" onclick="setItems(this.form);"><br>
4 <input type="checkbox"   id="item3" name="sticky[]" value="9" onclick="setItems(this.form);"><br>
5 <input type="checkbox"  id="item4"  name="sticky[]" value="24" onclick="setItems(this.form);"><br>
6 <input type="checkbox"  id="item5" name="sticky[]" value="11" onclick="setItems(this.form);"><br>
7 <input type="checkbox" id="item6"  name="sticky[]" value="13" onclick="setItems(this.form);"><br>
</form>
</body>
</html>

So now I just need to figure out the item count function you made. : )

Sign In

limit checkboxes in a form - boxes all differnent names

Recommended Posts

scotchegg78

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

dyluck

Link to comment

Share on other sites

Psycho

Link to comment

Share on other sites

dyluck

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information