CODEWITHSUNDEEP
phpjqueryformshtml-select
luv2code
luv2code

Reputation: 1296

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

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!!

Upvotes: 5

Views: 24100

Answers (4)

animuson
animuson

Reputation: 54729

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!

Upvotes: 3

ShankarSangoli
ShankarSangoli

Reputation: 69905

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.

Upvotes: 9

Zac
Zac

Reputation: 1635

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.

Upvotes: 0

Jasper
Jasper

Reputation: 75993

$(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.

Upvotes: 2

Related Questions