Get values from multiple select boxes with same name? Including its value with jquery and php

Question

I have looked for answers on here and have not found anything that directly can help me so I am going to ask here. I have a form with multiple select boxes:

<select name="acabados[]">
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>
</select>

<select name="acabados[]">
<option value="1">ABC</option>
<option value="2">DEF</option>
<option value="3">GHI</option>
</select>

As you can see they are the exact same select box. I have told the client to use select multiple but he wants it this way. The user can add as many as these select boxes as they desire (so it could be up to 20 select boxes at a time) and I need to get the value (1 or 2 or 3) and the text inside the option. It is then an array that I need to break down cause I need to add the total values of the select boxes in php. I could either use jquery for collecting the values or php, which ever is easier. Thank you in advance for any help!!

AFAIK this approach will not yield the results you need - I am fairly certain that whichever select is set last will occupy the value of $_POST["acabados"] (PHP). You might be able to use jQuery if you give each select a unique id attribute value. — Brian Driscoll
– Brian Driscoll, Commented Jan 19, 2012 at 18:40
how do you generate those select boxes? also, what are you asking for? how to manage the acabados[] vector? how to get the values of each select box in jquery? — Andreu Ramos
– Andreu Ramos, Commented Jan 19, 2012 at 18:40
@BrianDriscoll The format of the select elements in the question is correct. Adding [] to the end of the name adds the element's value to an array when posting to PHP. — Jasper
– Jasper, Commented Jan 19, 2012 at 18:47

ShankarSangoli · Accepted Answer · 2012-01-19 18:44:06Z

9

Try this, it will work for dynamically created select elements too.

$(document).on('change', 'select[name="acabados[]"]', function(){
    var total = 0;
    $('select[name="acabados[]"]').each(function(){
        total += parseInt($(this).val());
    });
});

total var will contain the total of all the select elements selected value.

answered Jan 19, 2012 at 18:44

ShankarSangoli

69.9k13 gold badges96 silver badges124 bronze badges

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

6 Comments

Jasper Over a year ago

This is pretty much the same answer I posted but the for(var i = 0, len = $selects.length; i < len; i++) {} runs a lot faster than .each(). Also, $.each() will run faster that .each(): jsperf.com/jquery-each-vs-for-loops/2 (it's actually kind of amazing how much faster a properly formatted for loop is). Event delegation could be good if necessary but if it isn't necessary then it creates unnecessary overhead with all the event bubbling. Just things to keep in mind.

ShankarSangoli Over a year ago

@Jasper - For dynamically created elements this is the way to go, take help of event bubbling. At the same time it attaches only one event handler no matter whatever number of elements.

Jasper Over a year ago

Event delegation is cheaper when binding (only has to bind to one element) but is more expensive when the events fire. Here is a jsperf I made to demonstrate the performance difference between delegation and binding: jsperf.com/jquery-delegate-vs-bind-triggering/2

ShankarSangoli Over a year ago

Yes I agree with you if it is only for a single element. But in OP's scenario there can be 20 select elements so event delegation makes sense and moreover if the elements are added dynamically then this solution is the best.

Jasper Over a year ago

The performance test I linked to doesn't use just 1 element, it uses close to 100 elements (and each one gets a triggered event every loop of the performance test). Notice that non-delegation performs about twice as fast in this situation (even though it takes less time to actually bind the event handler using delegation). As I stated in my first comment, event delegation isn't innately "bad", it has it's place, but that place is for dynamically created elements (where you can't bind to the elements directly when they are added to the DOM).

|

animuson · Accepted Answer · 2012-01-19 18:50:27Z

3

If you want to retrieve the values in PHP, you can just use $_POST['acabados'] and it will contain all the values selected in each menu. See a demo. As long as you include the [] after the name, it will compound all the values for any element with that name into a single array. You can even mix select menus, inputs, and textareas together!

edited Jan 19, 2012 at 18:50

answered Jan 19, 2012 at 18:40

animuson♦

54.9k28 gold badges142 silver badges150 bronze badges

Comments

Jasper · Accepted Answer · 2012-01-19 18:38:43Z

$(function () {
    var $select = $('select');
    $select.on('change', function () {
        var output = 0;
        for (var i = 0, len = $select.length; i < len; i++) {
            output += parseInt($select.eq(i).val());
        }
        //the `output` variable now contains the addition of all the values from the `acabados[]` select elements
    });
});

Here is a demo: http://jsfiddle.net/aPXXA/1/

You can change var $select = $('select'); to var $select = $('[name="acabados[]"]'); to only select the select elements with the acabados[] name attribute.

Zac · Accepted Answer · 2012-01-19 18:39:11Z

0

Why not just give them different id's and do the count in jquery/javascript. Alternatively give them all the same class, and do .each() to grab the values in all of them.

answered Jan 19, 2012 at 18:39

Zac

1,6372 gold badges13 silver badges15 bronze badges

Collectives™ on Stack Overflow

Get values from multiple select boxes with same name? Including its value with jquery and php

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

Comments

Linked

Related