Select multidimensional arrays from form with jque

Question

I tried to select a multidimensional form item with JQuery. But when I try to alert its value I just get an undefined.

This is my form:

    <select name='item[1][name]'>
       <option value='1'>Name 1</option>
       <option value='2'>Name 2</option>
       <option value='3'>Name 3</option>
       <option value='4'>Name 4</option>
    </select>

    <input type='text' name='item[1][id]' class='text' />

When I click on submit button, I try to select all my form elements.

I successfully selected the text input field with:

var item1i = $('input[name="item[1][id]"]');
var personi = $(item1i).val();

But when I try to select the select tag like this:

var item1n = $('input[name="item[1][name]"]');
var personn = $(item1n).val();

When I alert personi the right value is shown. But when I alert personn I get undefined.

Any idea what I'm doing wrong?

Answer 1

Use $('select[name="item[1][name]"]');

Or alternatively, $(':input[name="item[1][name]"]');

input will only select the elements with input tag, so for your select you have to use the select tag.

Alternatively jquery provides the special :input selector that returns any form element (input texts, selects, checkboxes, textarea,etc), so you can use that too.

Answer 2

var item1n = $('input[name="item[1][name]"]');  

you've the wrong selector here. Try this

var item1n = $('select[name="item[1][name]"]');