動的に複数のグループを作成する

Question

フォームで、顧客は複数のグループを作成できます。すべてのグループに同じ入力フィールドがあります。顧客が '+追加グループ'をクリックすると、追加のグループがjQueryを介して動的に作成されます（htmlはAJAX呼び出しを介してダウンロードされます）。

以下はサンプルhtmlです。各ulタグはグループです。グループulには、各入力フィールドにグループ番号フィールドが含まれています。このように：foo_1、foo_2

current_groupは、グループの総数を記録する非表示フィールドです。

add_groupボタンをクリックした場合、jQueryはグループの総数をcurrent_groupから動的に追加します。

これはどのように行う必要がありますか？

また、顧客がフォームを終了したときに[送信]ボタンをクリックした場合、PHPによるエラー検証のため同じページに戻ることがあります。私は動的HTMLグループをもう一度やりたくはありません。どのようにこれを解決することができますか？

<h2> Group One </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_1'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_1'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<h2> Group Two </h2> 
<ul class="Form"> 
    <li> 
     <label>Foo</label> 
     <select name='foo_2'> 
       <option value='1'>One</option> 
       <option value='2'>Two</option> 
       <option value='3'>Three</option> 
     </select> 
    </li> 
    <li> 
     <label>Bar</label> 
     <select name='bar_2'> 
       <option value='car'>Car</option> 
       <option value='bike'>Bike</option> 
       <option value='van'>Van</option> 
     </select> 
    </li> 
<ul> 

<input type='hidden' id='current_group' value='2' /> 
<input type='button' id='add_group' value='+ Additional Group' /> 

Answer 1

最初のHTML要素が既にある場合は、サーバーを呼び出す代わりに、いつでもjQueryのclone()を使用して要素をコピーできます。あなたが話したように、要素を見つけて名前を置き換える必要があります。

newFormElems.find("select").each( 
    function(){   
     this.name = this.name.replace(/^([^_]+_)(\d+)/, function(match,str,num){ return str + (parseInt(num,10)+1)}); 
    } 
); 

そして、何ダイナミックに対処するための最良の方法は次のとおりです。もっと読みやすい形式

var count = 1; 
function addRow(){ 
    count++; 
    var newFormElems = jQuery(".Form").clone(); //clone the form 
    var selects = newFormElems.find("select"); //find the selects 
    selects.eq(0).prop("name", "foo_" + count); //rename first 
    selects.eq(1).prop("name", "bar_" + count); //rename second 
    newFormElems.appendTo("#someElem"); //add to the page 
} 

それは数をインクリメントネーミング機能をやり直すための別の方法で

jQuery(".Form").clone().find("select").eq(0).prop("name", "foo_" + count).end().eq(1).prop("name", "bar_" + count).end().end().appendTo("#someElem"); 

フォーム？ Ajaxを使用してデータを送信することも、検証後にPHPコードをフォームに書き込むこともできます。

Answer 2

1つのことを行うにはいくつかの方法があります。これはあなたのロジックです。間違いがないとうまくいくはずです。

新しいグループの表示を取り出すときはいつも、group_ids[]という名前の隠しフィールドを保持する すべてのグループIDを配列に入れます。 $ _REQUEST ['group_ids']からその配列にアクセスできます（コードに応じて$ _POSTまたは$ _GETを使用できます）

今すぐページを送信するたびに、ユーザーによって送信されたグループIDを確認してください。ドロップダウン値も受け取ることができます。これらのグループを再度表示する必要がある場合は、$_REQUEST['group_ids']を使用してデータベースから取得し、ユーザーが選択した値と現在の値を比較して正しいオプションを選択したままにします。