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を繰り返し処理できます。代わりにCSSのクエリを使用し

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

。同じ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は一意である必要があります。

その後、コードは次のようにする必要があります： "HTML配列" のようなものはありません

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>