Create unique name for <input> in form

Question

Okay, first thing, I had a lot of trouble thinking of a title for this, and also of what to search for in Google. So that may just be me being stupid, but here is what I would like you help with.

I have a form, that has a button that will add additional input fields, but I would like the the name of the field to iterate everytime the button is pressed. E.g. the first time it will be:

<input type="textfield" name="field1" value=""/>

Then the second time it is pressed, it will be:

<input type="textfield" name="field2" value=""/>

I also have a small example of what I currently have here: http://jsfiddle.net/5gh75/14/

Please let me know if you can help me, or if you require more info thanks :)

Niet the Dark Absol · Accepted Answer · 2013-04-10 21:17:38Z

6

The best way to handle this is to name them all field[].

When handled by the server-side code, it will build an array for you. For instance, in PHP you would get $_POST['field'][0], $_POST['field'][1] and so on.

answered Apr 10, 2013 at 21:17

Niet the Dark Absol

326k86 gold badges480 silver badges604 bronze badges

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

1 Comment

Melloorr Over a year ago

This worked like a charm! Thanks so much for the quick and easy answer :)

Vucko · Accepted Answer · 2013-04-10 21:32:03Z

2

For your example:

JQuery

var i=0;
$('span.add').click(function () {
    $('<input>').attr({
        type: 'textfield',
        name: 'program'+i
    }).appendTo('#addsoftware');
    i++;
});

JSFiddle.

But @Kolink-s answer is much better.

edited Apr 10, 2013 at 21:32

answered Apr 10, 2013 at 21:20

Vucko

20.9k12 gold badges60 silver badges108 bronze badges

3 Comments

Jason Sperske Over a year ago

This is how I was about answer this question: name: 'program'+$('input').length

Melloorr Over a year ago

I had originally tried this, but everytime I pressed the button, the name would just be the same as the previous field :/

Vucko Over a year ago

@Melloorr it depends where did you put the var i=0;. Outside or inside the .click() event ?

Community · Accepted Answer · 2017-05-23 12:29:18Z

Edit: I just saw the previous posts after sending this. Using an array would definitely be better, and JQuery is always nice :).

Just use some javascript:

<HTML>
<HEAD>
<TITLE>Dynamically add Textbox, Radio, Button in html Form using JavaScript</TITLE>
<SCRIPT language="javascript">
idx = 0;
function add() {
     //Create an input type dynamically.
     var element = document.createElement("input");

     //Assign different attributes to the element.
     element.setAttribute("type", "textfield");
     element.setAttribute("name", "field" . idx);
     element.setAttribute("value", "");

     idx++;

     var foo = document.getElementById("fooBar");

     //Append the element in page (in span).
     foo.appendChild(element);
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<H2>Dynamically add element in form.</H2>
Select the element and hit Add to add it in form.
<BR/>
<INPUT type="button" value="Add" onclick="add()"/>

<span id="fooBar">&nbsp;</span>

</FORM>
</BODY>
</HTML>

I took this example from: Add more text fields dynamically in new line (html)

Collectives™ on Stack Overflow

Create unique name for <input> in form

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related