Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 0 down vote favorite

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>
share|improve this question
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 Apr 3 '12 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 Apr 3 '12 at 4:15
please see my reply on mamadrood's post below. – skylab Apr 3 '12 at 16:51

3 Answers

up vote 1 down vote

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')

share|improve this answer
up vote 0 down vote 
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;
    }
}
share|improve this answer
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." – inspector-g Apr 3 '12 at 4:10
up vote 0 down vote

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;
   }
}
share|improve this answer
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. – inspector-g Apr 3 '12 at 3:53
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. – mamadrood Apr 3 '12 at 3:57
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... – inspector-g Apr 3 '12 at 4:13
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... – mamadrood Apr 3 '12 at 4:30
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. – inspector-g Apr 3 '12 at 4:39
show 1 more comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.