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

Question

我有这样的表格：

<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>

有些 JavaScript 是这样的：

<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>

我需要做的是在用户单击生成 onclick="gen();" 按钮时检索 atrib[] 和 val[] 数组，以便循环遍历它们并执行一些操作。尝试这样做时，inputAtrib 和 inputVal return undefined。我没能找到一个简单的答案，拜托，你能帮我找到解决这个问题的正确途径吗？

Answer 1

你的方法是正确的。只是你使用的 document.getElementsByName 有点错误。来自 docs（重点是我的）：

The getElementsByName() method returns a collection of all elements in the document with the specified name (the value of the name attribute), as a NodeList object.

所以在你的代码中你做的：

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

换句话说，这将是一个元素数组，其 name 属性的值为 'attrib[]'，因此您不能只访问该数组的 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.querySelectorAll("input[name='atrib[]']").

我结合了这两种方法并从中得到了 Fiddle。随意使用它。

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

Answer 2

我的解决方案。 JavaScript 在警报中显示每个名为 atrib 和 val:

的输入的代码

<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>

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

Get array from input textboxes in JavaScript

javascript

arrays

input

textbox