jquery get values of multiple select boxes as array

Question

I'm still really new to using jquery, and have tried googling my problem, but cant quite figure it out.

I have multiple select boxes on my page, each named gearquan[]

How do I get jquery to get the selected values of each of those select boxes and pass it off as a serialized array?

Here is my html form:

    <script src="options.js"></script>
    Do you want to add the CDW?<br>
    <input type="radio" name="cdwq" id="cdwq" value="yes" checked>Yes<br>
    <input type="radio" name="cdwq" id="cdwq" value="no">No<br>
    <input type="hidden" name="cdw" id="cdw" value="20">

    <h2>Equipment</h2>If you need more than one of an item, select your      quantity below:<br><table width="700px" cellspacing="0">
    <tr style="border-bottom: 1px solid #000;">
        <td style="border-bottom: 1px solid #000;">
        <select name="gearquan[]" id=gearquan[]">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
            <option value="6">6</option>
            <option value="7">7</option>
            <option value="8">8</option>
        </select>
    </td>
    <td style="border-bottom: 1px solid #000;">HCK</td>
    <td width="40%" style="border-bottom: 1px solid #000;">Includes the Sleep Kits for up to 6 people, Kitchen Kit, Outdoor Kit, and Touring Kits.</td>
    <td style="border-bottom: 1px solid #000; text-align: right;">$250 each</td>
</tr>
<tr style="border-bottom: 1px solid #000;">
    <td style="border-bottom: 1px solid #000;">
    <select name="gearquan[]" id=gearquan[]">
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
        <option value="7">7</option>
        <option value="8">8</option>
    </select>

    </td><td style="border-bottom: 1px solid #000;">Gen</td><td width="40%" style="border-bottom: 1px solid #000;">Runs everything 2000 watt does plus an air conditioner in our larger campers</td><td style="border-bottom: 1px solid #000; text-align: right;">$50 Per Day.<br>$250 Per Week</td></tr></table>
    <br>

    Choose campground:
    <select name="park" id="park" style="width: 150px;">
    <option value="NONE"></option>
    <option value="fb">Fishing Bridge</option>
    <option value="bb">Bridge Bay</option>
    <option value="wt">West Thumb</option>
    <option value="gv">Grant Village</option>
    <option value="ma">Madison</option>
    <option value="no">Norris</option>
    <option value="ca">Canyon</option>
    <option value="to">Tower</option>
    <option value="ma">Mammoth</option>
    </select><br>
    <br>
    And Select Your Delivery Type: <select name="deliv" id="deliv"     style="width: 175px;"><option value="none">I will be towing it myself.</option>
    <option value="both">Deliver and Pickup</option>
    <option value="deliver">Deliver Only</option>
    <option value="pickup">Pickup Only</option>
    <option value="setup">Setup Only</option></select>
    </div>
    <br><br>
    <input type="submit" id="submit" value="Continue" style="background-color: #93161b;  border: 1px solid #93161b;  border-radius: 2px; box-shadow: 0 1px 1px 0 #000; color: #fff; width: 125px; margin: 20px 0; font-size: 1.5em; padding: 10px 0;"></form>

My script.js file:

$(document).ready(function(){
    $("#submit").click(function(){
            var values = new Array();
            values = $("#gearquan").serialize();
            //items = values.serialize;
            var cdw = document.getElementById("cdw").value;
            var cdwq = document.getElementById("cdwq").value;
            var toadd = document.getElementById("toadd").value;
            var park = document.getElementById("park").value;
            var deliv = document.getElementById("deliv").value;

            var dataString = 'gearquan=' +values+ '&cdw='+ cdw +'&cdwq='+ cdwq +'&toadd='+ toadd +'&park='+ park +'&deliv='+ deliv;

        $.ajax({
            type: "POST",
            url: "optionssub.php",
            data: dataString,
            cache: false,
            success: function(result){
            //alert(result);
            window.location.assign("confirm.php")
            }
        });
        //}
        return false;
    });
});

And the php file the script passes the values off to:

<?php
    session_start();

    $_SESSION["gearquan"]=$_POST["gearquan"];
    $_SESSION["cdw"]=$_POST["cdw"];
    $_SESSION["cdwq"]=$_POST["cdwq"];
    $_SESSION["toadd"]=$_POST["toadd"];
    $_SESSION["park"]=$_POST["park"];
    $_SESSION["deliv"]=$_POST["deliv"];
    echo "Success.";
?>

You should not have multiple elements with the same id on a page. This will cause problems. — Matthew Herbst
– Matthew Herbst, Commented May 5, 2016 at 18:41
Your mostly right, couple code corrections. Do not use multiple instances of the same ID id="gearquan[]" in this case. $("") is jquery short hand for select by css selector and returns a jquery object that mostly resembles an array of all dom nodes matching the selector. "#something" is select element by id which is probaly your problem. For serialization you probaly want to use api.jquery.com/each. — Blue
– Blue, Commented May 5, 2016 at 18:42

Ibrahim Khan · Accepted Answer · 2016-05-05 18:41:23Z

1

You can get the value of multiple select boxes as array using map() method.

var values = $('select').map(function() {
    return this.value;
});

You are using same id for multiple select. I would suggest you use class instead like following.

<select class="gearquan">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
</select>

And then use following js.

var values = $('.gearquan').map(function() {
    return this.value;
});

answered May 5, 2016 at 18:41

Ibrahim Khan

20.8k7 gold badges46 silver badges57 bronze badges

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

Comments

Matthew Herbst · Accepted Answer · 2016-05-05 18:42:58Z

1

var selectedValues = $('select[name="gearquan[]"] option:selected');

This will give an array of selected values from any select named gearquan[].

answered May 5, 2016 at 18:42

Matthew Herbst

32.3k27 gold badges92 silver badges141 bronze badges

Collectives™ on Stack Overflow

jquery get values of multiple select boxes as array

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related