获取单个/多个文本框值

Question

我的页面中有一个名为“myField”的字段现在这是动态的所以有 2 种情况，即它可以只是 1 个字段；

<input type="text" name="myField" />

或者可以有如下2个字段；

<input type="text" name="myField" />
<input type="hidden" name="myField" />

我使用下面的代码来访问JS中的值；

document.forms[0].myField[0].value

但是，如果只有一个字段（如第一种情况），则此方法不起作用

如何编写动态 JS 代码来处理相同的问题？它应该是跨浏览器兼容的。

Answer 1

document.getElementById("btn").addEventListener("click", function() {
	var texts = document.getElementsByName("n");
    var sum = "";
    for( var i = 0; i < texts.length; i ++ ) {
        sum = sum + texts[i].value;
    }
    document.getElementById("sum").innerHTML = sum;
});

<input type="text" name="n"/>
<input type="text" name="n"/>
<p id="sum"></p>
<button id="btn"> Get Sum</button>

或访问：How get total sum from input box values using Javascript?

Answer 2

乍一看这个特定示例，这两个字段具有相同的名称似乎很奇怪。通常，对于互斥的字段或相同类型并形成一个列表的字段，人们会期望使用相同的名称。

但您仍然可以使用它们：我不会使用自动属性，因为您发现它们不一致（document.forms[0].myField 将是只有一个字段时的字段，但字段的集合带有如果有多个相同的名称）。我会使用querySelectorAll:

var fields = document.querySelectorAll('[name="myField"]');

fields 将可靠地成为一个列表。您可以使用fields[0] 等访问该列表的元素，并从fields.length 获取长度。

var fields = document.querySelectorAll('[name="myField"]');
for (var n = 0; n < fields.length; ++n) {
  console.log("fields[" + n + "].value: ", fields[n].value);
}

<input type="text" name="myField" value="the text field"/>
<input type="hidden" name="myField" value="the hidden field"/>