Javascript获取表单数组值

Question

我有一个表格，设置了一个添加按钮，让用户可以一次提交多个人到网站。

一开始，表格有一个输入框以填写人名，如下示例：

<input type="text" name="name[]" value="Name" /> 

如果他们点击添加按钮，另一个将被添加，因此我最终得到以下内容。

<input type="text" name="name[]" value="Name" /> 
<input type="text" name="name[]" value="Name" /> 

当他们点击提交按钮时，我尝试在JavaScript中获取每个名称的值并循环遍历它们。我尝试过以下代码，但不起作用。

var inputs = document.getElementById('formIDhere').getElementsByTagName('name');
alert(inputs.length);

我从未收到警报，如果我只是像这样设置一个循环：

for(int i=0; i<inputs.length; i++)

什么都没有发生，希望能够帮助循环遍历javascript中name[]的值，非常感谢。

- user577732

---

为什么不展示提交按钮的代码？ - epascarello

FYI：getElementsByTagName（“name”）正在查找<name> </ name>。 - Duncan

Answer 1

我想你可以试试以下方法：

我猜你可以尝试：

var inputs = document.querySelectorAll("#formIDHere input[name='name[]']");
alert(inputs.length);
for (i = 0; i < inputs.length; i++) {
    // your code here
}

- Duncan

Answer 2

简单方法：

var names=document.getElementsByName('name[]');

for(key=0; key < names.length; key++)  {
    alert(names[key].value);

    //your code goes here
}

- Biswadeep Sarkar

Answer 3

[...document.querySelector("#FORMID").elements['name[]']].map(el=>el.value); 
// Returns ["name","name",...]

- Анатолій ЖелезнЫйквадрат

Answer 4

getElementsByTagName 返回一个数组，其中包含指定标签名称的元素。 在 HTML 中，没有标签名为 name 的元素。

name 是赋予 HTML 元素的属性。 要根据名称获取元素，可以使用

var ele=document.getElementsByName('whatevername');

ele 将包含指定名称的元素数组。然后，您可以使用循环迭代每个元素。

- Voonic

Answer 5

这就是表单元素的作用

var inputs = document.getElementById('formIDhere').elements["name[]"];
alert(inputs.length);
for (i = 0; i < inputs.length; i++) {
    // your code here
}

- Tony Brix

Answer 6

我认为你可以使用document.getElementById('formIDhere').elements.name。

它将给你一个包含所有值的数组。

- Halcyon

Answer 7

你的错误在于使用了getElementsByTagName，它要求一个名为<name>的标签，而你显然没有这个标签。尝试给输入框设置一个类，并使用jQuery $('className')来获取它，这样肯定会得到正确的结果。或者你仍然可以使用DOM document.getElementById('form').elements.name，但是这种方式可能不跨浏览器安全，除非经过仔细测试。

- Labib Ismaiel

Answer 8

使用 JQuery ，你可以尝试：

   var arr = $('#frmId').serializeArray();

serialize 方法提供了几个选项，您可以在此查看：https://api.jquery.com/serializearray/

- Oscar Gallardo