0

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

以下は、サンプルの html です。各ulタグはグループです。groupulでは、各入力フィールドにグループ番号フィールドが含まれます。このように: 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' />
4

2 に答える 2

1

There are several way to do one thing. This is your logic. It should work if no mistakes made.

Whenever you are fetching displaying the new group keep a hidden field named group_ids[] You will receive all the group ids in an array. You can access that array from $_REQUEST['group_ids'] (you can use $_POST or $_GET according to your code)

Now whenever you submit the page check what group ids are submitted by user. You can receive the drop down values also. If you need to display those groups again you can get it from database using $_REQUEST['group_ids'] and keep the correct option selected by comparing the current value from the user selected value.

于 2012-05-12T11:56:16.040 に答える
1

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

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

より読みやすい形式で

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
}

番号をインクリメントする命名機能をやり直す別の方法：

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

そして、動的フォームを処理する最良の方法は何ですか? Ajax を使用してデータを送信するか、検証後に php コードでフォームを書き出すことができます。

于 2012-05-12T11:57:03.360 に答える