Get the values of form array with jQuery

Question

Have looked quite hard for this answer but having no luck.

I have 3 select lists in a form. The first list is already part of the form, the second two are dynamically added. These select lists are part of an array named event_staff[].

<select name="event_staff[]" class="event_staff">
<option value="1">Mark</option>
<option value="2">Sue</option>
</select>

<select name="event_staff[]" class="event_staff">
<option value="1">Mark</option>
<option value="2">Sue</option>
</select>

<select name="event_staff[]" class="event_staff">
<option value="1">Mark</option>
<option value="2">Sue</option>
</select>

The user can select a person from each of the lists which are then to be sent via AJAX/Json to a a PHP script which iterates through the array and inserts the selected staff into the database.

For the life of me I dont know how to access the selected values of the lists and send them as an array to the PHP script.

Because the select lists are dynamically created I am not using IDs to access them. I was instead relying on accessing their values by name.

select[name='event_staff[]']

I had tried this code but the alert is returning empty:

var event_staff = new Array();
$("select[name='event_staff[]']:selected").each(function() {
event_staff.push($this).attr('value');
});
alert(event_staff);

Thanks.

Solved with the following, but not sure if its pretty or not:

var event_staff = new Array();
$('select[name="event_staff[]"] option:selected').each(function() {
event_staff.push($(this).attr('value'));
});

Just seems I needed the option:selected. While this doesnt seem to create an array, I have exploded the variable in the PHP on the delimiter and created the array that way.

Joseph Silber · Accepted Answer · 2014-02-04 20:55:03Z

var event_staff = [];
$("select[name='event_staff[]'] option:selected").each(function () {
    event_staff.push( this.value );
});
alert(event_staff);

Here's the fiddle: http://jsfiddle.net/Rx6Fk/

If you instead want the name of that person, use .text():

var event_staff = [];
$("select[name='event_staff[]'] option:selected").each(function() {
    event_staff.push( $.text(this) );
});
alert(event_staff);

Here's the fiddle: http://jsfiddle.net/Rx6Fk/1/

Alternatively, you could use jQuery's .map method:

var event_staff = $("select[name='event_staff[]'] option:selected").map(function() {
    return $.text(this);
}).get();
alert(event_staff);

Here's the fiddle: http://jsfiddle.net/Rx6Fk/2/

xdazz · Accepted Answer · 2012-03-26 14:54:15Z

0

.val() will return the selected value for select.

var event_staff = [];
$('select[name="event_staff[]"]').each(function() {
   event_staff.push($(this).val());
});
alert(event_staff);

The demo: http://jsfiddle.net/fHbaw/

answered Mar 26, 2012 at 14:54

xdazz

161k38 gold badges255 silver badges278 bronze badges

Collectives™ on Stack Overflow

Get the values of form array with jQuery

2 Answers 2

Comments

The demo: http://jsfiddle.net/fHbaw/

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

The demo: http://jsfiddle.net/fHbaw/

Comments

Related