Send multiple <select> elements with jQuery POST

Question

I have this jQuery code to add<select> elements in a table row with an "add" button:

$("#add").click(function() {
    $('#selected > tbody:last').append('<tr><td><select id=\'plan_id\'><option value=\'1\'>One</option><option value=\'2\'>Two</option><option value=\'3\'>Three</option></select></td></tr>');
    });

What do I need to modify in the below code to be able to POST multiple values from the select elements as an array? Right now it only inserts one value at the time to my MySQL database.

$('#course_update').click(function() {

var course_id = $('#course_id').val();
var plan_id = $('#plan_id').val();
var price_id = $('#price_id').val();
var course_name = $('#course_name').val();
var course_isActive = $('#course_isActive').val();
var course_city_id = $('#course_city_id').val();


$('#update_status').html('<img src="../images/ajax-loader.gif" />');
$.post('../update.php', {

    course_id: course_id, 
    plan_id : plan_id,
    price_id: price_id,
    course_name: course_name,
    course_city_id: course_city_id,
    course_isActive: course_isActive

    }, function(data) {
    $('#update_status').html(data);
    return false;
 });
});

First, ID's must be unique. Secondly, how do you wish to send the select data? as a list of values? or each one with it's on name/value pair. — user400654
– user400654, Commented Jul 10, 2012 at 21:07
I would like to send the value of each <select id ='plan_id'> as a list of values I guess, so I can pick it up inside a foreach loop with PHP — David
– David, Commented Jul 10, 2012 at 21:13

Lumocra · Accepted Answer · 2012-07-10 21:38:48Z

5

First of all you have to use classes for your selects instead of an id. jQuery will only return one element when you use an id. After that the following function will convert all values of the selects you give as paramater as an array.

/**
 * Convert select to array with values
 */    
function serealizeSelects (select)
{
    var array = [];
    select.each(function(){ array.push($(this).val()) });
    return array;
}

So:

var course_ids = serealizeSelects($('.course_id'));

Should for example return:

[1,3,2]

answered Jul 10, 2012 at 21:38

Lumocra

5452 gold badges6 silver badges16 bronze badges

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

4 Comments

David Over a year ago

Thank you. So, after I have created the variable for plan_ids (you called it course_ids) how do I send this with jQuery POST? Please describe using my code in the original question!

Lumocra Over a year ago

Like this: var plan_ids = serealizeSelects($('.plan_id')); $.post('../update.php', { plan_ids: plan_ids }, ...

David Over a year ago

Thank you, It work's now! Now I only need to figure out how to collect the values inside my update.php

Lumocra Over a year ago

In case of the example above, in your PHP $_POST['course_ids'] will hold: array(1,3,2)

jeroen · Accepted Answer · 2012-07-10 21:59:47Z

3

I would give every select element a unique name, an array would also do well here, see this example:

$('#selected > tbody:last').append('<tr><td><select id=\'plan_id\' name="my_select[]"><option value=\'1\'>One</option><option value=\'2\'>Two</option><option value=\'3\'>Three</option></select></td></tr>');

and then just serialize the form before you send it in:

var my_data = $("form").serialize();
...

Edit: The complete example:

$("#add").click(function() {
    $('#selected > tbody:last').append('<tr><td><select id=\'plan_id\' name="my_select[]"><option value=\'1\'>One</option><option value=\'2\'>Two</option><option value=\'3\'>Three</option></select></td></tr>');
    });
                                                                      ^^^^^^^^^^^^^^^^^^^

and:

$('#course_update').click(function() {

var my_data = $("form").serialize();

$('#update_status').html('<img src="../images/ajax-loader.gif" />');
$.post('../update.php', my_data, function(data) {
    $('#update_status').html(data);
    return false;
 });
});

edited Jul 10, 2012 at 21:59

answered Jul 10, 2012 at 21:06

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

1 Comment

David Over a year ago

I follow you, however I am unable to make it work inside my code. Would you mind providing me with your code, inside mine as posted in the original question? Thank's in advance.

Collectives™ on Stack Overflow

Send multiple <select> elements with jQuery POST

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related