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()で行うことができます。

第2に、これらの要素をループします。

第3に、name属性を変更してループからインデックスを追加する場合は、.setAttribute()を使用します。

同じページに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>

は、この情報がお役に立てば幸い！ :)