handling multiple array selects

Question

I have a form that begins with one select inside a div element. If the user wants to add another year, they click 'Add Another Year' which copies the div element below and clones it.

<div class="inputfield" id="modelyeardiv" class="modelyeardiv">
    <select name="frmyears[]" tabindex="3">
        <option value="0000">-- SELECT A YEAR --</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
        <option value="2012">2012</option>
     </select>
     <a href="#" class="addmodelyear">Add Another Year</a>
</div>

Clicking 'Add Another Year' allows me to clone it so that the user can select multiple years.

$(document.body).on('click', '.addmodelyear', function(e) {
    e.preventDefault();
    $('#modelyeardiv').after($('#modelyeardiv').clone());
    return false;
});

Now when my form submits, I want to check if there is only one frmyears[] present. And if there is, I want to make sure the option value select is not 0000. This will force the user to select at least one year.

How should I go about this? I thought about creating a tracker within the jquery code above. So I'd increment it by 1 each time 'Add Another Year' is clicked. Upon submit, my jquery code would check this tracker. If it's 1, then see if the value is 0000 and prompt the user if so.

Is the efficient? Is there another way to accomplish this?

As a side note -- the client wants multiple drop downs like this. He does not want a multiple="multiple" list.

If there's more than one year dropdown, you might still want to check that at least one of them was changed from 0000. — Brilliand
– Brilliand, Commented Jan 17, 2014 at 0:30

Brilliand · Accepted Answer · 2014-01-17 00:29:43Z

1

The CSS/jQuery selector ":selected:not([value=0000])" should do the trick:

if($("#modelyeardiv :selected:not([value=0000])").length == 0) {
    // User has not selected a year
}

answered Jan 17, 2014 at 0:29

Brilliand

13.8k6 gold badges49 silver badges58 bronze badges

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

Comments

Russ Cam · Accepted Answer · 2014-01-17 00:31:46Z

1

Are the <select> elements inside the form that will be submitted? If so, I think it would be simpler to just check how many of them you have with the name frmyears[] and if only one, then check the selected value, when the form is submitted. Something like

$(document).on("submit", "form", function(e) {

    var selects = $(this).find("select[name='frmyears[]']");

    if (selects.length === 1 && selects.val() === "0000") {
        // stop form submission
        e.preventDefault();

        // do something else
    }  
});

answered Jan 17, 2014 at 0:31

Russ Cam

126k34 gold badges211 silver badges275 bronze badges

Comments

Mike · Accepted Answer · 2014-01-17 00:29:42Z

0

Think I was overthinking this problem.

if($('select[name="frmyears[]"]').length === 1) {
    alert('only one year -- check if its 0000');
}

answered Jan 17, 2014 at 0:29

Mike

9803 gold badges15 silver badges30 bronze badges

Comments

Meow · Accepted Answer · 2014-01-17 00:30:51Z

0

do you mean that they can only pick one from each select box but can have multiple select box?

if so, just clone the select box with the same attribute name, then the values will be submit in an array i.e. request.getParameterValues("frmyears") will return the array of selected years

<div class="inputfield" id="modelyeardiv" class="modelyeardiv">
    <select name="frmyears" tabindex="3" multiple>
        <option value="0000">-- SELECT A YEAR --</option>
        <option value="2014">2014</option>
        <option value="2013">2013</option>
        <option value="2012">2012</option>
     </select>
</div>

edited Jan 17, 2014 at 0:30

answered Jan 17, 2014 at 0:24

Meow

1381 silver badge7 bronze badges

Collectives™ on Stack Overflow

handling multiple array selects

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related