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[] 值的帮助将不胜感激

Answer 1

我想你可以试试：

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

Answer 2

简单的方法：

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

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

    //your code goes here
}

Answer 3

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

Answer 4

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

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

Answer 5

你的错误是使用getElementsByTagName ，它要求一个名为<name>的标签，当然你没有它，例如尝试将一个类设置为输入并使用 jquery $('className')获取它肯定会得到正确的结果，或者使用 dom 你仍然可以使用document.getElementById('form').elements.name但除非仔细测试，否则这种方式可能不是跨浏览器安全的

Answer 6

getElementsByTagName返回在参数中指定了标签名称的元素数组。 在 html 中，没有标签名称为name元素。

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

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

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

Answer 7

这就是表单元素的用途

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

Answer 8

使用JQuery你可以尝试：

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

serialize方法提供了几个您可以签入的选项： https : //api.jquery.com/serializearray/