Question

我正在寻找一个包含动态数量的输入文本框的表单。我希望每个文本框都构成一个数组的一部分（理论上这将使我更容易遍历它们，特别是因为我不知道最终将存在的文本字段的数量）。 HTML代码类似于：

<p>Field 1: <input type="text" name="field[1]" id="field[1]"></p>
<p>Field 2: <input type="text" name="field[2]" id="field[2]"></p>
<p>Field 3: <input type="text" name="field[3]" id="field[3]"></p>
<p>Field 4: <input type="text" name="field[4]" id="field[4]"></p>
<p>Field 5: <input type="text" name="field[5]" id="field[5]"></p>

然后，这些数据将被发送到PHP脚本，并将表示为数组 - 或者至少，这就是理论。

所以我的第一个问题是，这是否可以使用HTML实现？表单是否设计为以这种方式工作？

如果答案是“是”，那么我将如何使用jQuery访问每一个或者使用简单的旧JavaScript？

我尝试使用以下jQuery代码实现此目的：

someval = $('#field[1]').val();

和

someval = $('#field')[1].val();

以及以下JavaScript：

someval = document.getElementById('related_link_url')[1].value;

但我没有运气。

提前致谢。

修改

我应该注意到，从Javascript的角度来看，我已经让它工作了，每个元素的ID就像field_1，field_2等。但是，我觉得如果我可以通过将每个文本框放入其中来实现它一个数组，它将使整个和更容易管理代码。

Answer 1

为每个元素提供一个类，并使用jQuery访问该组：

<p>Field 1: <input type="text" name="field[1]" class="fields"></p> 
<p>Field 2: <input type="text" name="field[2]" class="fields"></p>
<!-- etc... -->

jQuery的：

$("input.fields").each(function (index)
{
    // Your code here
});

这将在每个input元素上运行匿名函数，其类名为“fields”，this关键字指向当前元素。有关详细信息，请参阅http://api.jquery.com/each/。

Answer 2

首先，id属性不能包含[或]字符。

有很多方法可以获得对这些元素的jQuery / plain JavaScript引用。您可以使用后代选择器：

<fieldset id="list-of-fields">
   <!-- your inputs here -->
</fieldset>

$("#list-of-fields input");
document.getElementById("list....").getElementsByTagName("input");

您还可以使用属性选择器：

$("input[name^=field]");

我不确定这是否是唯一的方法，但我认为在纯JavaScript中你必须获取所有input个元素（document.getElementsByTagName），然后循环遍历这些元素的数组并检查每个元素element（是否具有name属性，其值以field开头）。

使用jQuery或普通Javascript访问HTML输入文本框的数组

2 个答案: