JavaScriptの動的変数名（AJAX）

Question

AJAXのポストメソッド（合計30個の入力）の場合、後のPHP処理のために変数をバインドするのが簡単にできると思いました。しかし、私はそれが、うまくdoesntの仕事を行うことができると思っていた道...

私のjavascriptのコード：HTMLで

for (i = 1; i < 10; i++) { 
    var fieldname+i = $('#f' + i + 'name').val(); 
    var fieldspecify+i = $('#f' + i + 'specify').val(); 
    var fieldwidth+i = $('#f' + i + 'width').val(); 

     var data = { 
      fieldname+i: fieldname+i, 
      fieldspecify+i: fieldspecify+i, 
      fieldwidth+i: fieldwidth+i 
     }; 
} 

マイコード：

<?php for($i = 1; $i < 10; $i++) { ?> 
<div style="margin-top:25px;" class="row"> 
    <div class="col-md-5"> 
     <label for="f<?= $i; ?>name">Veld <?= $i; ?>: Wat is de vraag van het veld?</label> 
     <input type="text" class="form-control" id="f<?= $i; ?>name" 
       placeholder="Bijv. Wat is 1 + 2?"/> 
    </div> 
    <div class="col-md-4"> 
     <label for="f<?= $i; ?>specify">Veld <?= $i; ?>: Soort veld</label> 
     <select class="form-control" id="f<?= $i; ?>specify"> 
      <option disabled selected>Selecteer..</option> 
      <option value="0">Tekst-input</option> 
      <option value="1">Selecteer-input</option> 
      <option value="2">Textarea-input</option> 
     </select> 
    </div> 
    <div class="col-md-3"> 
     <label for="f<?= $i; ?>width">Veld <?= $i; ?>: Breedte</label> 
     <select class="form-control" id="f<?= $i; ?>width"> 
      <option disabled selected>Selecteer..</option> 
      <option value="0">25%</option> 
      <option value="1">50%</option> 
      <option value="2">75%</option> 
      <option value="3">100%</option> 
     </select> 
    </div> 
</div> 

は、私の質問は：でどのようにして30行を入力するよりも簡単に変数をバインドできますか？

Answer 1

ユニークなIDの代わりにクラスを使用します。その後、あなたは、それらを介してちょうどループあなたが現在の行に関連する要素を見つけるために、DOMを横断することによって埋めることができ、関連するキー/値のペアを保持するオブジェクトを返すようにmap()を使用することができ、この

var data = $('.row').map(function() { 
 
    var $row = $(this); 
 
    return { 
 
    fname: $row.find('.fname').val(), 
 
    fspecify: $row.find('.fspecify').val(), 
 
    fwidth: $row.find('.fwidth').val(), 
 
    } 
 
}).get(); 
 

 
console.log(data);

.row { 
 
    margin-top: 25px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="row"> 
 
    <div class="col-md-5"> 
 
    <label>Veld 1: Wat is de vraag van het veld? 
 
     <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/> 
 
    </label> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <label>Veld 1: Soort veld 
 
     <select class="form-control fspecify"> 
 
     <option disabled selected>Selecteer..</option> 
 
     <option value="0">Tekst-input</option> 
 
     <option value="1">Selecteer-input</option> 
 
     <option value="2">Textarea-input</option> 
 
     </select> 
 
    </label> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <label>Veld 1: Breedte 
 
     <select class="form-control fwidth"> 
 
     <option disabled selected>Selecteer..</option> 
 
     <option value="0">25%</option> 
 
     <option value="1">50%</option> 
 
     <option value="2">75%</option> 
 
     <option value="3">100%</option> 
 
     </select> 
 
    </label> 
 
    </div> 
 
</div> 
 

 
<div class="row"> 
 
    <div class="col-md-5"> 
 
    <label>Veld 2: Wat is de vraag van het veld? 
 
     <input type="text" class="form-control fname" placeholder="Bijv. Wat is 1 + 2?"/> 
 
    </label> 
 
    </div> 
 
    <div class="col-md-4"> 
 
    <label>Veld 2: Soort veld 
 
     <select class="form-control fspecify"> 
 
     <option disabled selected>Selecteer..</option> 
 
     <option value="0">Tekst-input</option> 
 
     <option value="1">Selecteer-input</option> 
 
     <option value="2">Textarea-input</option> 
 
     </select> 
 
    </label> 
 
    </div> 
 
    <div class="col-md-3"> 
 
    <label>Veld 2: Breedte 
 
     <select class="form-control fwidth"> 
 
     <option disabled selected>Selecteer..</option> 
 
     <option value="0">25%</option> 
 
     <option value="1">50%</option> 
 
     <option value="2">75%</option> 
 
     <option value="3">100%</option> 
 
     </select> 
 
    </label> 
 
    </div> 
 
</div>

のようなもの

ここでは2行しかありませんが、このパターンは無限に機能します。

Answer 2

カウントされた変数名、つまり名前に実行中のインデックスを持つ変数は使用しないでください。これは常に間違っています（コードでは構文上無効です）。

同じ種類以上のものがある場合は、配列を使用してください。

var fields = [], i; 

for (i = 1; i < 10; i++) { 
    fields.push({ 
     name: $('#f' + i + 'name').val(), 
     specify: $('#f' + i + 'specify').val(), 
     width: $('#f' + i + 'width').val() 
    }); 
} 

Answer 3

あなたは、単に使用することができます

const els = document.getElementById("formId").elements; 

これは、すべてのフィールド/フォーム内の要素を介して実行されます。したがって、これを使用して、結果をオブジェクトにプッシュするか、または好きなように実行できます。

これはアプローチの基礎ですが、あなたのニーズに容易に適応できます。出力を確認するには、コンソールを確認してください。

例

https://jsfiddle.net/9d2szx3k/

HTML

<form id="formId"> 
    <input type="text" value="Name" /> 
    <input type="password" value="Password" /> 
    <input type="tel" value="07888888888" /> 
    <select> 
    <option value="Option 1">Option 1</option> 
    <option value="Option 2">Option 2</option> 
    <option value="Option 3" selected="selected">Option 3</option> 
    </select> 
</form> 

はJavaScript

const els = document.getElementById("formId").elements; 
console.log(els); 

Array.from(els).forEach(el => { 
    console.log(el.value); 
});