Populating HTML input array with JQuery

Question

I'm very much a newb when it comes to JQuery, and this arose out of an attempt to learn how to use it.

I have a form defined in which I have a series of inputs like the following:

<input name="Name[]">

I have successfully set up JQuery to clone a variable number of these and the submit works perfectly. When I submit this to PHP, I get the post data I am expecting.

["Name"]=> array(6) { [0]=> string(0) "" [1]=> string(0) "" [2]=> string(0) "" [3]=>  string(0) "" [4]=> string(0) "" [5]=> string(0) "" }

The problem I'm running into, though, is attempting to populate these form elements with the json data returned by my PHP. When I try to set the values of these elements in the form using:

$('[name='+key+']', frm).val(value);

where (for instance) key = Name[0]

I haven't had much luck and get an error:

Uncaught Error: Syntax error, unrecognized expression: [name=Name[0]]

Apparently it doesn't like the brackets in there? Is there a way to access elements in this manner?

bystwn22 · Accepted Answer · 2013-08-06 23:25:35Z

1

Just take my answer as a suggestion only.
You can use the index/position of the input with eq function to set the value

example

$('[name="Name[]"]', frm).eq( key ).val( value );

or

$('[name="Name[]"]:eq('+key+')', frm).val( value );

Where key is the index/position of the input in the array ( ie: 0, 1, 2, .... )
Read more here http://api.jquery.com/eq/

edited Aug 6, 2013 at 23:25

answered Aug 6, 2013 at 23:20

bystwn22

1,7941 gold badge10 silver badges9 bronze badges

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

1 Comment

James Over a year ago

Thank you for the response it's exactly what I needed!

Sushanth -- · Accepted Answer · 2013-08-06 23:16:49Z

1

You need to escape the [] with double backslash // for it to work.

$('input[name="Name\\[0\\]"]')

Try this

key= key.replace(/\[/g, "\\\\[");
key= key.replace(/\]/g, "\\\\]");

$('[name="'+key+'"]', frm).val(value);

edited Aug 6, 2013 at 23:16

answered Aug 6, 2013 at 23:06

Sushanth --

55.8k9 gold badges70 silver badges109 bronze badges

1 Comment

James Over a year ago

I couldn't get this to work, but I appreciate you taking the time to respond :)

Ravi K Thapliyal · Accepted Answer · 2013-08-06 23:27:11Z

1

The name of the element stays Name[] in JavaScript and hence jQuery as well. Indexing the name is only required for PHP. jQuery would simply return a collection (just like if the name hadn't used []) with each jQuery object accessible using the .eq() method.

<input name="Name[]" />
<input name="Name[]" />

var jsonResp = ["hello", "world"];

$.each( jsonResp, function( idx, val ) {
    $( '[name = "Name[]"]' ).eq( idx ).val( val );
});

JSFiddle Demo

edited Aug 6, 2013 at 23:27

answered Aug 6, 2013 at 23:21

Ravi K Thapliyal

51.9k9 gold badges80 silver badges90 bronze badges

3 Comments

James Over a year ago

Thank you! This led me to exactly what I needed.

James Over a year ago

Apparently I can't accept two answers... despite both of them being spot-on... and I'm not sure who answered first...

Ravi K Thapliyal Over a year ago

@James, it's okay mate. I appreciate that you cared to comment. :)

Collectives™ on Stack Overflow

Populating HTML input array with JQuery

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related