Javascript获取表单数组值

Posted 2023-03-11

【中文标题】Javascript获取表单数组值

【英文标题】：Javascript get form array values

【发布时间】：2013-10-01 08:31:51

【问题描述】：

我有一个表单，它设置了一个添加按钮，这样我的用户就可以一次向网站提交多个人。

首先表单有一个输入来填写人名，下面是一个示例

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

【问题讨论】：

为什么不显示提交按钮的代码？

仅供参考：getElementsByTagName("name") 正在寻找

【参考方案1】：

我想你可以试试：

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

【参考方案2】：

简单的方法：

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

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

    //your code goes here

【参考方案3】：

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

【参考方案4】：

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

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

【参考方案5】：

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

【参考方案6】：

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

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

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

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

【参考方案7】：

这就是表单元素的用途

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

【参考方案8】：

使用JQuery 你可以试试：

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

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