Validate Checkbox that has an array as name parameter

Question

I used to validate checkbox form with a code like this:

<div>
  <form action="survey.php" method="post" name="survey"> 
  <span class="form"><input type="checkbox" name="event1" onClick="return countMarketing()">Event1</span>
  <span class"form"><input type="checkbox" name="event2" onClick="return countMarketing()">Event2</span>
  <span class"form"><input type="checkbox" name="event3" onClick="return countMarketing()">Event2</span>
  <!-- other forms -->
  </form>
</div>

And a javascript validation that is something like this (to limit the count of checkboxes checked):

function countMarketing() {

        var NewCountMarketing = 0

        if (document.survey.event1.checked)
        {NewCountMarketing = NewCountMarketing + 1}

        if (document.survey.event2.checked)
        {NewCountMarketing = NewCountMarketing + 1}

        if (document.survey.event3.checked)
        {NewCountMarketing = NewCountMarketing + 1}
        if (NewCountMarketing == 3)
        {
            alert('Please choose only two')
            document.survey; return false;
        }
    }

And validation like this works. But now, say im using php to for the submission, how do i check if in JS if the name of the form is something like this:

 <input type="checkbox" name="events[]" id="event1" onClick="return countMarketing()">Event1

Ive tried to change the JS to:

if (document.survey.events[].checked)
    {code here}

if (document.survey.getElementByName('events[]').checked)
    {code here}

if (document.survey.getElementById('event1').checked)
    {code here}

But it doesnt work.. any can shed some light on me about this? thank you very much :)

Are you using jQuery? You have the tag but no code for jQuery. — Precastic
– Precastic, Commented Jun 22, 2013 at 22:24

Precastic · Accepted Answer · 2013-06-22 22:54:23Z

1

If you are in fact using jQuery you could do:

Make sure you are including jQuery in your document before you use this function & that the document is loaded before you try to run the function.

function countMarketing() {

  if( $('input[name="events[]"]').filter(':checked').length > 2 ) {
    alert('Please choose only two');
  }

}

edited Jun 22, 2013 at 22:54

answered Jun 22, 2013 at 22:35

Precastic

4,0422 gold badges27 silver badges30 bronze badges

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

6 Comments

GitKidd Over a year ago

Thanks, I have some jquery for some slides but I am really new to JS/jQuery and its also ok if its a jQuery solution. Btw, I did try this but it doesn't seem to work atm, would it be because I also need to declare the form name? or will jQuery be able to work out by just the name of the input (say there are 5 checkbox inputs with the name events[]

Precastic Over a year ago

Make sure you have jQuery included & that it is wrapped in $(function(){ <code-here> }); otherwise it will execute before the document has fully loaded. With this you can have as many checkboxes as you like as long as they are named the same - no need for a form name.

Precastic Over a year ago

@GitKidd I have updated my answer to show you how it would be used in your function

GitKidd Over a year ago

Great its working now, but how do I not allow the third box to proceed with a true value? meaning, after the alert pops up, the third box ticked is still checked, it should be that after the alert pops up, the 3rd tick is canceled.

Precastic Over a year ago

@GitKidd OK, sorry. In that case you can do what is in this fiddle... jsbin.com/axales/5 so whenever someone clicks on a checkbox - even if it is #2 and 2 others are check it will uncheck the one you clicked.

|

Sushanth -- · Accepted Answer · 2013-06-22 23:28:10Z

1

First remove the inline events declaration and move it to an external Javascript file or a script block

You can always use bracket Notation to access such attributes

document.survey["events[]"]

Code

    var elems = document.survey,
    checkboxNames = ["event1[]", "event2[]", "event3[]"];

for (var i = 0; i < checkboxNames.length; i++) {
    bindClick(elems[checkboxNames[i]]);
}

function bindClick(elem) {
    elem.addEventListener('click', countMarketing);
}

function countMarketing() {

    var NewCountMarketing = 0
    var latest;
    for (var i = 0; i < checkboxNames.length; i++) {
        if (elems[checkboxNames[i]].checked) {
            latest = elems[checkboxNames[i]];
            NewCountMarketing++;
        }
    }

    if (NewCountMarketing == 3) {
        latest.checked = false;               
        alert('Please choose only two')
        document.survey;
        return false;
    }
}

Check Fiddle

edited Jun 22, 2013 at 23:28

answered Jun 22, 2013 at 22:46

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

3 Comments

GitKidd Over a year ago

Thanks @Sushanth! i will try this now, what would i need to change on the checkboxNames if say that I have 5 checkbox that has got the name events[] (for purposes of php form submission).

GitKidd Over a year ago

I checked the fiddle, how do I have the latest box unchecked once the alert pops up? because after the alert, the 3rd box value is still checked.

Sushanth -- Over a year ago

Just maintain an extra variable and set it to false when you check for the count. Check updated code

Collectives™ on Stack Overflow

Validate Checkbox that has an array as name parameter

2 Answers 2

6 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related