Получить значение текстового поля в одном/несколько

Question

У меня есть поле на моей странице с именем «myField». Теперь это динамический. Так что есть 2 случая, так как это может быть только одно поле;

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

ИЛИ могут быть 2 поля, как указано ниже;

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

Я использую следующий код для доступа к значению в JS;

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

Однако, это не работает, если есть только 1 поле (как в первом случае)

Как написать динамический код JS, чтобы справиться с такой же? Он должен быть совместим с браузером.

Answer 1

На первый взгляд этого конкретного примера кажется странным, что эти два поля имеют одинаковое имя. Обычно можно было бы ожидать одно и то же имя для полей, которые являются взаимоисключающими, или которые являются одним и тем же типом и образуют список.

Но вы все еще можете работать с ними: я бы не использовал автоматические свойства, так как вы обнаружили, что они непоследовательны (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"/>

Answer 2

document.getElementById("btn").addEventListener("click", function() { 
 
\t 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?