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