Getting values from form using jquery selectors, multiple select fields

Question

First of all, I had a hard time formulating my title, so I'm sorry for that. Anyway, on to my question.

I have a big table of information, where some cells have form fields, specifically two form fields for each row. At the end of the row, I have a "Save" link.

There are multiple rows where each row have their own sets of fields.

I am having a hard time getting these two values stored in a variable, since they are dynamically rendered, I do not have a specific id connected to each .

Therefore I would think that traversing the DOM upwards would yield me my results, but no, so far I am only getting "undefined" (I think I am on the right path, I just can't figure it out).

Take this code as an example;

<td>
<select multiple="multiple" name="paintings">
<option value="The Persistance of Memory" selected="selected">The Persistance of Memory</option>
<option value="The Great Masturbator" selected="selected">The Great Masturbator</option>
<option value="The Scream">The Scream</option>
</select>
</td>
<td>
<select name="painters">
<option value="VanGogh" selected="selected">Van Gogh</option>
<option value="Dali">Dali</option>
<option value="Munch">Munch</option>
</select>
</td>
<td>
<a href="#">Save</a>
</td>

When the user clicks on Save, the selected values should be stored in a variable. This is what I have tried thus far;

$("a").click( function (e){
    str = $(this).find("select[name|='painters']").val() || [];
    alert(str.join(","));

Instead of "find", I have also tried "parent", "prev" and "closest". I have also tried specifying the selector to "select option:selected".

This works fine for getting all elements or just a single one, but when I'm trying to find the closest two and storing it in two different variabels it won't work.

Greatful for any advice or help. Thank you.

tymeJV · Accepted Answer · 2013-10-15 21:11:48Z

1

You can use .map() to get an array of values: (yours isn't working because find() traverses down the DOM tree, where-as you need to go back up to the tr, then find from there)

$("a").click( function (e) {
    var selectValues = $(this).closest("tr").find("select").map(function() {
        return this.value;
    }).get();
});

A fiddle for ya! http://jsfiddle.net/5tLxk/

Edit: Since you have a multi-select, you can nest another map in there to get all the values (Fiddle: http://jsfiddle.net/5tLxk/1/)

$("a").click( function (e) {
    var selectValues = $(this).closest("tr").find("select").map(function() {
        return $(this).find("option:selected").map(function() {
            return this.value;
        }).get();
    }).get();

    console.log(selectValues);
});

edited Oct 15, 2013 at 21:11

answered Oct 15, 2013 at 21:04

tymeJV

105k14 gold badges165 silver badges158 bronze badges

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

1 Comment

dojs Over a year ago

Ah, of course! I really have a hard time grasping the concept of chaining on all of the different functions. Thank you for your help - it makes total sense now. Have a great day.

Collectives™ on Stack Overflow

Getting values from form using jquery selectors, multiple select fields

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related