Dynamic Post Data Values for Jquery Ajax

Question

On my page I have multiple dropdowns like so:

<select class="form-control extra-dropdown" id="extra-1" name="extra[1]">
    <option value="0">0</option>
    <option value="1">1</option>
</select>

<select class="form-control extra-dropdown" id="extra-2" name="extra[2]">
    <option value="0">0</option>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>

<select class="form-control extra-dropdown" id="extra-3" name="extra[3]">
    <option value="A">A</option>
    <option value="B">B</option>
</select>

These dropdowns are created dynamically - depending on where the user has come from determines what and how many dropdowns are shown.

When the user changes any of these options I want to run a php script with jQuery.ajax and it needs all the selected values for extra[]. SO it would be like so:

$('select.extra-dropdown').change(function(){
    $.ajax({
        type: 'POST',
        url: 'my-ajax-script.php',
        data: { 
            postVar1: $('#extra-1').val(), 
            postVar2: $('#extra-2').val(),
            postVar3: $('#extra-3').val()
        },
        beforeSend:function(){
            // show loader...
        },
        success:function(data){
            // show xxx...
        },
        error:function(){
            // show errors...
        }
    });
});

However how do I populate the data: {} dynicamlly based on how many dropdown options are on the page. It can vary from 1 on the page to a max of 20.

Hozeis · Accepted Answer · 2016-06-29 11:26:59Z

1

Try doing this:

var dataOut = [];
$.each($('.extra-dropdown'),function(index,value){
    dataOut['extra-'+index] = $(this).val();
    //or 
    //dataOut[$(this).attr('id')] = $(this).val();       
});

Then

data : dataOut

edited Jun 29, 2016 at 11:26

answered Jun 29, 2016 at 11:18

Hozeis

1,76218 silver badges39 bronze badges

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

2 Comments

odd_duck Over a year ago

Thank you that works. What would I use to get the extras in my php script? (for example I want to access them in a loop liek so: foreach ($_POST['extra'] as $id => $value) { ...}

Hozeis Over a year ago

if im not mistaken you could always just send the array and traverse it in php. try data : { 'extraArray' : dataOut} then in php do foreach ($_POST['extraArray']

Collectives™ on Stack Overflow

Dynamic Post Data Values for Jquery Ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related