如何在页面上有多个相同名称的输入框？

Question

我正在制作一个网页。它有一些输入字段组成一个部分，然后在该部分下方是“添加另一个”按钮。该按钮将使用JavaScript为页面添加另一个相同的部分;相同的表单域。

然后在页面后面有一个“计算”按钮。它运行一些其他需要通过jQuery访问这些输入字段的JavaScript。

在页面上有多个重复input元素的推荐方式是什么？我知道不应该有两个具有相同ID的元素，但是具有相同名称的两个元素会发生什么？他们可以单独访问吗？或者我应该用JavaScript以不同的方式命名这些输入元素，例如在名称的末尾添加“1”，“2”等，然后使用循环？ （似乎凌乱）

我应该如何识别和访问这些相同的输入字段组？

Answer 1

您可以使用document.getElementsByName('name')，然后遍历结果以获取每个值。

Answer 2

只要他们有不同的名字，他们可以没有问题地拥有相同的名字。

当您提交它们时，服务器将获得重复的名称/值对，并且在处理它们时需要注意。不同的语言有不同的表现，你必须查阅适当的文档，了解如何使用你正在使用的语言。

Answer 3

什么是建议在页面上有多个重复的input元素？

只要做到这一点。

我知道，不应该有两个具有相同ID的元素，但是两个同名元素会发生什么？

任何JS可用的方法来访问他们的名字将给你一个集合，而不是一个元素。您可以像阵列一样访问各个元素（包括使用for和collection.length循环）。

它们可以单独访问吗？

如果您通过名称访问它们，则可以使用它们的索引。 （collection[0]）。

如果您想访问特定的ID，您也可以给他们ID。

如果要将元素链接在一起并让它们互相引用，则可以使用DOM结构来帮助您。

对于一个非常简单的例子：

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

显然，在现实世界的情况，你应该使用unobtrusive JS和build on things that work。

Answer 4

你可以给名称为数组
例如：

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

您可以附加上点击“添加另一个”按钮相同的形式。您可以使用textBox [0]，textBox [1]等访问它们。