从javascript中的html元素获取值

Question

我有这种动态表单，我将输入的每个值都放在数组中。问题是我无法在JavaScript函数中获取所有这些项目。

我的HTML表单：

<form> 
<input type="text" placeholder="Name 1" id="myInputs[]"> 
<input type="text" placeholder="Name 2" id="myInputs[]"> 
<input type="text" placeholder="Name 3" id="myInputs[]"> 
<input type="text" placeholder="Name 4" id="myInputs[]"> 
<input type="text" placeholder="Name 5" id="myInputs[]"> 
<input type="text" placeholder="Name 6" id="myInputs[]"> 
<button onclick="process()">Next</button> 
</form> 

我的脚本功能

function process(){ 
    var name = document.getElementById("myInputs[]").value; 
    var name1 = name[0]; 
} 

在此功能中我得到的第一个数组项，但这只是返回的第一个条目的第一个字符。

Answer 1

ID应该始终是唯一的。

id全局属性定义了一个唯一的标识符（ID），它在整个文档中必须是唯一的。其目的是在链接（使用片段标识符），脚本或样式（使用CSS）时标识元素。

您应该考虑使用name="myInputs[]"代替。

这样你就可以做document.getElementsByName("myInputs[]")并迭代NodeList。

function process() { 
 
    var allInputs = document.getElementsByName("myInputs[]"); 
 
    var name1 = allInputs[0].value; // This is the Value of the first Input 
 
}

<form> 
 
    <input type="text" placeholder="Name 1" name="myInputs[]"> 
 
    <input type="text" placeholder="Name 2" name="myInputs[]"> 
 
    <input type="text" placeholder="Name 3" name="myInputs[]"> 
 
    <input type="text" placeholder="Name 4" name="myInputs[]"> 
 
    <input type="text" placeholder="Name 5" name="myInputs[]"> 
 
    <input type="text" placeholder="Name 6" name="myInputs[]"> 
 
    <button onclick="process()">Next</button> 
 
</form>

Answer 2

使用CSS查询，而不是。请注意，您不应该有多个具有相同ID的项目，如果您愿意，它们可以具有相同的name。这是典型地用于发送所述物品到服务器作为一个数组，并且仅由一些服务器处理公认的框架

function process(){ 
 
    var names = document.querySelectorAll("form [name='myInputs[]']"); 
 
    var name1 = names[0].value; 
 
    console.log('First name is' + name1); 
 
}

<form> 
 
<input type="text" placeholder="Name 1" name="myInputs[]"> 
 
<input type="text" placeholder="Name 2" name="myInputs[]"> 
 
<input type="text" placeholder="Name 3" name="myInputs[]"> 
 
<input type="text" placeholder="Name 4" name="myInputs[]"> 
 
<input type="text" placeholder="Name 5" name="myInputs[]"> 
 
<input type="text" placeholder="Name 6" name="myInputs[]"> 
 
<button onclick="process()">Next</button> 
 
</form>

Answer 3

首先，ID应该是唯一的。

然后，代码应该是这样的：

function process(){ 
 
    var name = document.getElementsByClassName("myInputs[]"); 
 
    alert(name[0].placeholder); 
 
}

<form> 
 
    <input type="text" placeholder="Name 1" class="myInputs[]"> 
 
    <input type="text" placeholder="Name 2" class="myInputs[]"> 
 
    <input type="text" placeholder="Name 3" class="myInputs[]"> 
 
    <input type="text" placeholder="Name 4" class="myInputs[]"> 
 
    <input type="text" placeholder="Name 5" class="myInputs[]"> 
 
    <input type="text" placeholder="Name 6" class="myInputs[]"> 
 
    <button onclick="process()">Next</button> 
 
</form>