在表单中为<input />创建唯一名称

时间:2013-04-10 21:15:55

标签: javascript jquery forms

好的,首先,我在考虑这个标题时遇到了很多麻烦,以及在谷歌搜索的内容。所以这可能只是我的愚蠢,但这就是我希望你帮助的。

我有一个表单,它有一个按钮,可以添加额外的输入字段,但我希望每次按下按钮时都会迭代字段的名称。例如。这将是第一次:

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

然后第二次按下它,它将是:

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

我还有一个关于我目前所拥有的一个小例子:http://jsfiddle.net/5gh75/14/

如果您能帮助我,或者如果您需要更多信息,请告诉我们。)

3 个答案:

答案 0 :(得分:6)

处理此问题的最佳方法是将它们全部命名为field[]

当由服务器端代码处理时,它将为您构建一个数组。例如,在PHP中,您将获得$_POST['field'][0]$_POST['field'][1]等等。

答案 1 :(得分:2)

对于你的例子:

<强> JQuery的

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

JSFiddle

但是@ Kolink的回答要好得多。

答案 2 :(得分: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)

获取此示例