从JavaScript中的输入文本框获取数组

我有一张这样的表格：

<form>
<input type="text" name="name" value="object name"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<div id="fooBar"></div>
<input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();">
</form>

<script>
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib[]");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val[]");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.innerHTML += "<br>";
}

function gen() {
    var inputAtrib = document.getElementsByName("atrib[]").value;
    var inputVal = document.getElementsByName("val[]").value;
    alert(inputAtrib);
    alert(inputVal);
}
</script>

使用如下JavaScript：

<form>
<input type="text" name="name" value="object name"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<input type="text" name="atrib[]" value="atrib name"><input type="text" name="val[]" value="default value"><br>
<div id="fooBar"></div>
<input type="button" value="Add" onclick="add();"><input type="button" value="Generate" onclick="gen();">
</form>

<script>
function add() {
    //Create an input type dynamically.
    var element = document.createElement("input");
    var element2 = document.createElement("input");

    //Assign different attributes to the element.
    element.setAttribute("type", "text");
    element.setAttribute("value", "atrib name");
    element.setAttribute("name", "atrib[]");
    element2.setAttribute("type", "text");
    element2.setAttribute("value", "default value");
    element2.setAttribute("name", "val[]");

    // the div id, where new fields are to be added
    var bar = document.getElementById("bar");

    //Append the element in page (in span).
    bar.appendChild(element);
    bar.appendChild(element2);
    bar.innerHTML += "<br>";
}

function gen() {
    var inputAtrib = document.getElementsByName("atrib[]").value;
    var inputVal = document.getElementsByName("val[]").value;
    alert(inputAtrib);
    alert(inputVal);
}
</script>

函数add（）{
//动态创建输入类型。
var元素=document.createElement（“输入”）；
var element2=document.createElement（“输入”）；
//为元素指定不同的属性。
setAttribute（“类型”、“文本”）；
element.setAttribute（“值”、“属性名”）；
setAttribute（“名称”、“atrib[]”）；
element2.setAttribute（“类型”、“文本”）；
element2.setAttribute（“值”、“默认值”）；
element2.setAttribute（“name”，“val[]”）；
//要添加新字段的div id
var bar=document.getElementById（“bar”）；
//在页面中追加元素（在span中）。
条.子元素（元素）；
附加子元素（元素2）；
bar.innerHTML+=“
”；
}
函数gen（）{
var inputAtrib=document.getElementsByName（“atrib[]”）值；
var inputVal=document.getElementsByName（“val[]”）值；
警报（输入trib）；
警报（输入值）；
}

---

我需要做的是，当用户单击generate

onclick=“gen（）；”

按钮时，检索

atrib[]

和

val[]

数组，以便通过它们循环并执行一些操作。尝试执行此操作时，

InputTrib

和

inputVal

返回

undefined

。我找不到一个简单的答案，你能帮我找到解决这个问题的正确方法吗？

你的方法是正确的。只是您使用的

文档.getElementsByName

有点错误。从（重点是我的）：

getElementsByName（）

方法返回文档中具有指定名称（name属性的值）的所有元素的集合，作为节点列表对象

因此，在您的代码中：

document.getElementsByName("atrib[]") //This returns a NodeList object

换句话说，这将是一个元素数组，该数组具有值为“attrib[]”的

name

属性，因此您不能仅访问该数组的

value

属性，这就是为什么在执行此操作时：

var inputAtrib = document.getElementsByName("atrib[]").value; //You get undefined

console.log(document.getElementsByName("atrib[]")); //This would return a node list and you can see all the matched input elements are returned

因此，您可能希望执行以下操作：

 var test = document.getElementsByName("atrib[]");
 console.log(test[0].value); //Outputs "atrib name 1"

您还可以使用

document.queryselectoral（“输入[name='atrib[]']”）

我将这两种方法结合起来，并对其进行了改进。随便玩玩吧

---

希望它能让您从正确的方向开始。

我的解决方案。在警报中显示名为

atrib

和

val

的每个输入的JavaScript代码：

<script>
function gen() {
    var o = 0;
    while (o < document.getElementsByName("atrib").length) {
        var inputAtrib = document.getElementsByName("atrib")[o].value;
        var inputVal = document.getElementsByName("val")[o].value;
        alert(inputAtrib);
        alert(inputVal);
        o++;
    }
}
</script>

函数gen（）{
VarO=0；
while（o

document.getElementsByName（“atrib”）.value没有任何运气，它返回

undefined

，因为您的name属性不是

atrib

，而是

atrib[]

使用

atrib[]

也返回undefined。还有，我不明白为什么投反对票。我已经做了研究，但没有发现这方面的问题。我发现了很多有用的信息，用于从正常输入中检索数据，但是关于数组>，我发现了很多有用的信息。因为这不是提问的方式。“这是我的标记，我想要这个和这个。去给我看看代码”不是你怎么问的，所以，给我看看你尝试过的代码，这不起作用我根本没有要求为我写代码，我想知道我应该怎么做，我想知道一些提示，让我自己走上解决方案的道路…谢谢，这对我帮助很大！有了你的信息，我做了我想做的事情，如果有人感兴趣的话，我还对结果做了一个修改（）！我们如何将所有值保存在一个对象或数组中，然后立即更改，而不是提醒每个名称？