How to use a numeric array as a form input name?

Question

Looked through many of the questions about this - and could not find a real answer. So here goes...

I have a form where I will be dynamically adding sections (in this case "attendee information") and so I wanted to use names like firstName[0], firstName[1], etc. I have already written the code to add the sections with a new numeric index for each.

However...

When I attempt to use JQuery (or just plain JS) to read the values of any of the form fields (dynamically created or not), I'm getting undefined. If I change the names to firstName1, firstName2, etc., it works. Only when I use the numeric array indexes.. nada.

I've tried...

$('#firstName[' + indexNum + ']')val();
$('input[name=firstName[' + indexNum + ']]').val();

.. and a couple other things. (And yes, the ID is the same as the name.)

Is there something I'm missing?

As an aside, it's a bad naming convention that you've chosen. The HTML id will look like a JavaScript index. Why not just name the elements: `firstName1` and `firstName2`, etc.? — Scott Marcus, Mar 21 '16 at 19:32
@ScottMarcus Thanks for that Scott - but I was trying to find a much simpler way to uses the arrays to loop over and save info (based on results) to different tables. This seemed simpler than parsing the names with potentially unknown numbers. — Lee Fuller, Mar 21 '16 at 20:45
Thanks to others for pointing out questions I simply didn't see. Just when you think you've covered the research questions.. ugh. Thanks all for the help - as usual. — Lee Fuller, Mar 21 '16 at 20:50
You are much better off following convention here. Give elements `id` that are unique and expressive. Don't worry about gathering them all up into an array later as this is very easy using `document.querySelectorAll(selector)`. Once they are in the array, looping is a no-brainer. Trust me, the more you try to make the names work as you've described, the more pain you are in for down the road. — Scott Marcus, Mar 21 '16 at 20:59

guest271314 · Accepted Answer · 2016-03-21T19:35:50.887

See Category:Attribute

Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.

double quotes inside single quotes: $('a[rel="nofollow self"]')

single quotes inside double quotes: $("a[rel='nofollow self']")

escaped single quotes inside single quotes: $('a[rel=\'nofollowself\']')

escaped double quotes inside double quotes: $("a[rel=\"nofollow self\"]")

The variation you choose is generally a matter of style or convenience.

Try wrapping value of attribute in single quotes 'firstName[" + indexNum + "]'

var indexNum = 0;

console.log($("input[name='firstName[" + indexNum + "]']").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="firstName[0]" value="abc" />

alternatively escape [ and ] characters with two backslash \\ characters

var indexNum = 0;

console.log($("input[name=firstName\\[" + indexNum + "\\]]").val())

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<input name="firstName[0]" value="abc" />

While this says some of the same things as Zakaria's answer, I'm going to choose this one due to it being more complete. Zakaria's answer is great as well. Wish I could mark two answers! — Lee Fuller, Mar 21 '16 at 20:47

score 1 · Answer 2 · answered Mar 21 '16 at 19:28

You should add double quotes :

$('input[name="firstName[' + indexNum + ']"]').val();
______________^___________________________^

Hope this helps.

for(var i=0;i<3;i++){
  alert($('input[name="firstName[' + i + ']"]').val());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="firstName[0]" value="11"/>
<input type="text" name="firstName[1]" value="22"/>
<input type="text" name="firstName[2]" value="33"/>

score 0 · Answer 3 · answered Mar 21 '16 at 19:28

0

As it is indicated in Jquery page, "[" and "]" are special characters and must be escaped in order to be used as a name of an element.

You should use:

$('#firstName\\[' + indexNum + '\\]')val();
$('input[name=firstName\\[' + indexNum + '\\]]'

answered Mar 21 '16 at 19:28

ismaro3

79
1
5

How to use a numeric array as a form input name?

3 Answers3