How to have multiple input boxes of the same name on a page?

Question

I am making a web page. It has some input fields grouped into one section, and then below that section is an "Add another" button. That button will add another identical section to the page using JavaScript; the same form fields.

Then later down the page there is a "Calculate" button. It runs some other JavaScript which needs to have access to these input fields via jQuery.

What is the recommended way to have multiple duplicate input elements on the page? I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name? Can they be accessed individually? Or should I name these input elements differently with JavaScript, e.g. adding a "1", "2", etc. to the end of their name, and then use loops? (that seems messy)

How should I identify and access these identical groups of input fields?

Jave · Accepted Answer · 2013-10-21 10:58:00Z

1

You can use the document.getElementsByName('name') and then loop over the result to get each value.

edited Oct 21, 2013 at 10:58

Jave

31.9k14 gold badges83 silver badges92 bronze badges

answered Feb 17, 2011 at 18:32

JAiro

6,0493 gold badges24 silver badges21 bronze badges

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

Comments

btilly · Accepted Answer · 2011-02-17 18:33:12Z

0

As long as they have differents ids they can have the same name without trouble.

When you submit them, the server will get repeated name/value pairs and needs to be aware of that in processing them. Different languages differ in how they do that, you'll have to consult appropriate documentation for how to do it with whatever you are using.

answered Feb 17, 2011 at 18:33

btilly

47.8k3 gold badges70 silver badges101 bronze badges

Comments

Quentin · Accepted Answer · 2011-02-17 18:39:46Z

What is the recommended way to have multiple duplicate input elements on the page?

Just do it.

I am aware that there shouldn't be two elements with the same ID, but what happens with two elements of the same name?

Any methods available to JS for accessing them by name will give you a collection instead of an element. You can access the individual elements within just like an array (including looping over with for and collection.length).

Can they be accessed individually?

If you are accessing them by name, then you can use their index. (collection[0]).

You can also give them ids if you want to access a specific one.

If you want to link elements together and have them refer to each other, then you can use the DOM structure to help you.

For a very simplified example:

<div>
    <input>
    <button onclick="alert(this.parentNode.getElementsByTagName('input')[0]);">...</button>
</div>

Obviously, in a real world situation you should use unobtrusive JS and build on things that work.

Chaitanya Munipalle · Accepted Answer · 2012-12-27 12:07:27Z

0

You can give the name as an array
ex:

<input type="text" name="textBox[]"/>

You can append the same form on clicking "Add Another" Button. You can access them using textBox[0], textBox[1] etc.

answered Dec 27, 2012 at 12:07

Chaitanya Munipalle

7225 silver badges12 bronze badges

1 Comment

Kees C. Bakker Over a year ago

Doe you have any documentation about this behavior?

Collectives™ on Stack Overflow

How to have multiple input boxes of the same name on a page?

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related