javascript multiple checkbox validation

Question

I would like to use this simple script with my form to make sure I have at least 1 box checked but I have a feeling something is wrong, most likely at the getElementsByName tag. I always get the pop up box no matter if I have items checked or not.

<script language="javascript">
function validate() {
    var chks = document.getElementsByName('id[][]');
    var hasChecked = false;
    for (var i = 0; i < chks.length; i++) {
        if (chks[i].checked) {
            hasChecked = true;
            break;
        }
    }
    if (hasChecked == false) {
        alert("Please select at least one.");
        return false;
    }
    return true;
}
</script>

and the form, which may or may not end up with more checkboxes in the end:

<form 
enctype="multipart/form-data" 
method="post" 
action="formsubmission.php"
name="form_type" onSubmit="return validate()">

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">
<label class="Checkbox" for="attrib-8-10">thick</label>
<input id="attrib-8-11" type="checkbox" value="11" name="id[8][11]">
<label class="Checkbox" for="attrib-8-11">medium</label>
<input id="attrib-8-12" type="checkbox" value="12" name="id[8][12]">
<label class="Checkbox" for="attrib-8-12">thin</label>

If you change the selector to document.getElementsByName("id") and change all the names of the inputs to simply "id", then it seems to work. Why the problems were originally caused? I'm not sure, all I know is that it works. hopefully someone else will post an answer explaining why. — rcplusplus
– rcplusplus, Commented Apr 3, 2012 at 4:02
Is there any particular reason you have the name attributes specified this way? Most server-side languages don't need you to specify the index, just the fact that you want the form elements treated as an array (in which case you would use id[]) — inspector-g
– inspector-g, Commented Apr 3, 2012 at 4:15

inspector-g · Accepted Answer · 2012-04-03 03:51:30Z

1

This line is the culprit:

var chks = document.getElementsByName('id[][]');

The id attribute of an HTML element is meant to be unique, which yours are. The name attribute is meant to logically group elements together (especially in the case of checkboxes and radio buttons).

In order to group them together, the name must be the same. id[8][10] is not the same as id[8][11], and your call to document.getElementsByName('id[][]') is literally looking for elements named "id[][]".

You must change the name of the elements to be something that matches, i.e. "checkboxGroup" and then use document.getElementsByName('checkboxGroup')

answered Apr 3, 2012 at 3:51

inspector-g

4,1862 gold badges26 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Starx · Accepted Answer · 2012-04-03 04:00:45Z

0

var chks = document.getElementsByName('id[][]');

Does not select any element, as you have specied all the index on the elements .

Here is how you can do it?

var chks= document.getElementsByTagName('input');
for (var x=0; x < chks.length; x++) {
    if (chks[x].type.toUpperCase()=='CHECKBOX' && chks[x].checked == true) {
        hasChecked = true;
        break;
    }
}

edited Apr 3, 2012 at 4:00

answered Apr 3, 2012 at 3:52

Starx

79.3k50 gold badges187 silver badges266 bronze badges

1 Comment

inspector-g Over a year ago

As I stated on mamadrood's post, "This will work for his simple example, but if he has other input elements on the page (including other unrelated checkboxes) this will cause bad behavior. Changing the name attribute to match on all related checkboxes is the only proper way to resolve this."

mamadrood · Accepted Answer · 2012-04-03 04:01:19Z

0

Maybe using the getElementsByTagName

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}

As the comments says, you may not check the attribute type, because it could break your code if you add any other checkbox in your website.

Change this

<input id="attrib-8-10" type="checkbox" value="10" name="id[8][10]">

By

<input id="attrib-8-10" type="checkbox" value="10" class="checkable" name="id[8][10]">

Then the "validate" code should look like this.

var chks = document.getElementsByTagName('input');
for (var i in chks)
{
   if (chks[i].getAttribute('type') == "checkbox" && chks[i].className == "checkable")
   {
      if (chks[i].checked)
         hasChecked = true;
   }
}

edited Apr 3, 2012 at 4:01

answered Apr 3, 2012 at 3:50

mamadrood

7575 silver badges12 bronze badges

6 Comments

inspector-g Over a year ago

This will work for his simple example, but if he has other input elements on the page (including other unrelated checkboxes) this will cause bad behavior. Changing the name attribute to match on all related checkboxes is the only proper way to resolve this.

mamadrood Over a year ago

Yeah, it's sure, adding a class to these checkbox and check this class instead of the type attribute could do the trick, if he needs a special name value for his post request.

inspector-g Over a year ago

Again, that may work for his simple example, but if he (or maybe a designer) ever adds another class then the code can cause bad behavior as well. It's possible he needs his name attributes specified the way they are, but such a requirement is pretty rare. Perhaps if skylab would chime in...

mamadrood Over a year ago

If he doesn't submit his form with Ajax, his browser will take the name attribute of the inputs to create the $_POST array. So it's important that the name attribute to be different...

inspector-g Over a year ago

Not true. The name attribute can be, for example, "id[]" and on the server side an array will be made of it due to the brackets (which can be accessed with $_POST['id']). He does not need to specify the indices in the names to achieve this.

|

Collectives™ on Stack Overflow

javascript multiple checkbox validation

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related