複数のフォームフィールドグループを動的に作成して処理する

Question

JSとPHPに基づいて小さな注文ページを作成していますが、フォームデータの処理方法についてはちょっと残念です。フォームでは、ユーザーは1つ以上の製品を注文することができます。それぞれの製品には、ラジオボタンの形式でいくつかの設定があります。ユーザーが1より多くの製品、部品を追加する場合

newUnit = newUnit.replace(/name="unitPrice/g, 'name="unitPrice' + i); 
    newUnit = newUnit.replace(/name="body/g, 'name="body' + i); 
    newUnit = newUnit.replace(/name="details/g, 'name="details' + i); 
    newUnit = newUnit.replace(/name="topShelf/g, 'name="topShelf' + i); 


<div class="unit"> 
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900"> 
    <div class="row"> 
     <div class="col-sm-3"> 
      <fieldset class="form-group options-body"> 
       <legend>Body</legend> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="0" name="body" value="White Ash" checked> 
         White Ash 
        </label> 
       </div> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="0" name="body" value="Black Ash"> 
         Black Ash 
        </label> 
       </div> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="800" name="body" value="Walnut"> 
         Walnut (+800) 
        </label> 
       </div> 
      </fieldset> 
     </div> 
    </div> 
</div> 
<div class="unit"> 
    <input type="hidden" class="unitPrice" name="unitPrice" value="0" data-price="6900"> 
    <div class="row"> 
     <div class="col-sm-3"> 
      <fieldset class="form-group options-body"> 
       <legend>Body</legend> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="0" name="body2" value="White Ash" checked> 
         White Ash 
        </label> 
       </div> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="0" name="body2" value="Black Ash"> 
         Black Ash 
        </label> 
       </div> 
       <div class="form-check"> 
        <label class="form-check-label"> 
         <input type="radio" class="form-check-input" data-price="800" name="body2" value="Walnut"> 
         Walnut (+800) 
        </label> 
       </div> 
      </fieldset> 
     </div> 
    </div> 
</div> 

（サンプルマークアップ - すべての入力フィールドを一意にするために、私は、（新製品を追加する際に）異なる各入力名の値を作る小さなJSスニペットを追加しましたので、のような

これは注文手順全体を通じて価格と設定を更新するのには効果的ですが、私はデータを提出すると、異なる製品をどのように処理するのかが分かりません。異なる名前。 私はそこに、より良いアプローチ、任意のアイデア/方向があると思いますか？フォームデータの

例

unitPrice=6900&unitPrice=6900&body%5B%5D=White%20Ash&details%5B%5D=Stainless%20steel&topShelf%5B%5D=Wood&firstName=&lastName=&email=&phone=&address=&city=&zip=&country=&firstName2=&lastName2=&email2=&phone2=&address2=&city2=&zip2=&country2=&totalPrice=13800 

Answer 1

私はそれを行う方法の完全なコードを与えるつもりはありませんが、説明は十分です。あなたがしたいことは、提出する前にサーバーに送信されているデータを変更することです。各フィールドに4つの配列を作成し、それぞれのデータでクライアント側で初期化することができます（注：空の値も含めて順序を維持します）。次に、それらの配列のすべてをPOSTフィールドとして送信します。これは、AJAXクエリを使用して投稿を処理することができます。サーバー側では、各アレイを別々に反復処理できるようになりました。これは、POST変数がサーバーに設定されている（おそらく64で、ユーザーCANがそれを超えている場合）POST変数の量を減らす可能性のある答えの1つに過ぎません。

これが役に立ちます。コードバージョンのコメントが必要な場合は、もう少し時間を費やします。

Answer 2

1）たぶん、代わりのJavaScriptのフィールドを作成するためにPHPを使用する方が簡単です。

2）ループを使って名前を確認し、保存してください。配列に：

unitPrice = []; //create array 
for($i = 0; $i < 10; $i++) 
{ 
    array_push(unitPrice,$_GET['unitPrice'.$i]); //push value into array 
} 

Answer 3

"unitPrice '+ i"の代わりにunitPrice []のようなフォームフィールド名に配列を使用する必要があります。その後、配列としてPHPのフォームフィールドを反復することができます。たとえば、$unitPrice = $_POST['unitPrice']は、foreachで反復することができます。それは理にかなっていますか？