2013-04-10 1 views
3

Хорошо, во-первых, у меня было много проблем, думая о названии этого, а также о том, что искать в Google. Так что это может быть просто быть глупым, но вот что я хотел бы вам помочь.Создайте уникальное имя для <input> в форме

У меня есть форма, у которой есть кнопка, которая добавит дополнительные поля ввода, но я бы хотел, чтобы имя поля повторялось каждый раз при нажатии кнопки. Например. в первый раз это будет:

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

Затем второй раз она нажата, то это будет:

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

У меня также есть небольшой пример того, что я в настоящее время здесь: http://jsfiddle.net/5gh75/14/

Пожалуйста, дайте мне знать, если вы можете мне помочь, или если вам нужно больше информации спасибо :)

ответ

6

Лучший способ справиться с этим - назвать их всех field[].

При обработке кода на стороне сервера он будет строить массив для вас. Например, в PHP вы получите $_POST['field'][0], $_POST['field'][1] и так далее.

+0

Это работало как шарм! Большое спасибо за быстрый и простой ответ :) – Melloorr

2

Для примера:

JQuery

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

JSFiddle.

Но ответ Колкина намного лучше.

+1

Вот как я ответил на этот вопрос: 'name: 'program' + $ ('input'). Length' –

+0

@JasonSperske тот же вывод с меньшим кодом. :) – Vucko

+0

Я изначально пробовал это, но каждый раз, когда я нажимал кнопку, имя было бы таким же, как в предыдущем поле:/ – Melloorr

0

Редактировать: Я только что видел предыдущие сообщения после отправки. Использование массива определенно будет лучше, и JQuery всегда будет приятным :).

Просто использовать некоторые 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> 

Я взял этот пример из: Add more text fields dynamically in new line (html)

Смежные вопросы