使用jQuery或纯Javascript访问一组HTML输入文本框

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访问每个使用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)然后循环遍历这些元素的数组并检查每个元素(它是否具有以name哪个值开始的属性field).