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>

当用户点击生成atrib[]按钮以循环播放它们并执行某些操作时，我需要做的是检索val[]和onclick="gen();"数组。在尝试执行此操作时，inputAtrib和inputVal会返回undefined。我无法找到一个简单的答案，拜托，您能帮我找到解决这个问题的正确途径吗？

Answer 1

您的方法走在正确的轨道上。只是你使用document.getElementsByName稍有不对。来自docs（强调是我的）：

getElementsByName()方法返回文档中具有指定名称（name属性值）的所有元素的集合，作为 NodeList 对象。

所以在您的代码中：

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

我的解决方案。在警报中显示名为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>

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

2 个答案: