Question

我的代码会通过单击“添加”按钮自动添加在表单中定义的新类似行。

<html>
<body>
<form>
<input type="text" name="quantity[]" class="input_text" id="pro"/> 
</form>
</body>
</html>

现在我想在javascript函数中访问quantity[]的不同值。

如何使用它的ID或名称属性在javascript中访问quantity[]的这些不同值。

  <script>
  function abc() {
      var id = document.getElementById("pro").value;
  }
  </script>

Answer 1

使用纯JavaScript执行此操作的方法是获取具有特定名称的所有元素，如下所示：

var fields = document.getElementsByName('quantity[]');

如果您想要访问特定值，您也可以这样做：

console.log(fields[0].value); // foo

这是一个带有代码示例的jsfiddle。

Answer 2

HTML：

<form name="order">
    <input type="text" name="quantity[]" class="input_text" /> 
    <input type="text" name="quantity[]" class="input_text" /> 
    <input type="text" name="quantity[]" class="input_text" /> 
</form>

JS：

var elements = document.forms['order'].elements['quantity[]'];
console.log(elements[1].value); // outputs the value of the 2nd element.

演示：http://jsfiddle.net/NDbwt/

Answer 3

你可以这样做。

HTML：

<form>

    <input name="p_id[]" value="0"/>
    <input name="p_id[]" value="1"/>
    <input name="p_id[]" value="2"/>

</form>

的javascript：

var p_ids = document.forms[0].elements["p_id[]"];
alert(p_ids.length);
for (var i = 0, len = p_ids.length; i < len; i++) {
  alert(p_ids[i].value);
}

Answer 4

$('input[name=quantity]').each(function(){
    alert($(this).val())
});

Answer 5

首先：id必须在页面上是唯一的。否则document.getElementById将始终返回带有请求id的第一个spotted元素。

在您的情况下，您可以做下一步：

var id = document.getElementsByName("quantity[]")[0].value;

但更安全（我不确定返回数组中的项目顺序是否总是与添加元素的顺序相同）将生成id，如pro_0，pro_1，pro_2等

Answer 6

当您在名称上使用方括号时，PHP可能会将表单字段作为数组读取，这可能会让您感到困惑。这只是一个PHP技巧 - 对于JavaScript，[]没有任何特殊含义，你可以用通常的方式阅读这些项目：

var values = [];
var fields = document.getElementsByName("quantity[]");
for (var i = 0, len = fields.length; i < len; i++) {
    values.push(fields[i].value);
}
alert("Values:\n" + values.join("\n"));

见in action。

如何在Javascript中访问表单元素xyz []？

6 个答案: