使用javascript循環設置表單名稱

Question

我有一個用戶可以動態添加文本輸入的表單。這將生成具有多個具有相同名稱的文本輸入的表單。如果這個表格被提交，它們會相互覆蓋。爲了解決這個問題，我需要更改名稱，以便在提交表單時添加一個遞增的前綴。誰能幫忙？形式的

實施例（一旦三個輸入已添加）：

<form action="" method="post"> 
<td class="recipe-table__cell"> 
<input id="answer" name="the_answer" type="text" value="" > 
<input id="answer" name="the_answer" type="text" value="" > 
<input id="answer" name="the_answer" type="text" value="" > 
</td> 
<input type="submit" value="Submit"> 
</form> 

上提交

期望的後輸出：

陣列（[1-答案] =>測試[2-答案] => OK [3回答] =>不錯）

，而不是陣列（[答案] =>測試）

Answer 1

首先，選擇所有要添加的屬性的元素。這可以通過.querySelectorAll()完成。

其次，循環這些元素。

第三，使用.setAttribute()將name屬性更改爲追加循環中的索引。

請注意，您還需要增加ID屬性，因爲在同一頁面上不能有重複的ID。您還需要將<td>元素替換爲<div>元素，以允許.querySelectAll()正常工作，並確保有效的標記。

這可以看出，在下面的例子：

var inputs = document.querySelectorAll("form div input"); 
 
for (var i = 0; i < inputs.length; i++) { 
 
    inputs[i].setAttribute("id", "answer" + i); 
 
    inputs[i].setAttribute("name", "the_answer" + i); 
 
    console.log(inputs[i]); // Added purely to show the change 
 
}

<form action="" method="post"> 
 
    <div class="recipe-table__cell"> 
 
    <input id="answer" name="the_answer" type="text" value=""> 
 
    <input id="answer" name="the_answer" type="text" value=""> 
 
    <input id="answer" name="the_answer" type="text" value=""> 
 
    </div> 
 
    <input type="submit" value="Submit"> 
 
</form>

希望這有助於！ :)