jquery - 動的フィールド値を取得する方法 - jQuery

Question

私は jQuery を初めて使用するので、このシナリオを実装する方法がわかりません。

たとえば、未加工の名前と電子メールに 2 つのテキストボックスがあるフォームがあるとします。右側にはユーザーが押すことができるプラスボタンがあり、名前と電子メールの 2 つのフィールドを持つ別の raw が下に作成されます。2 番目の raw には右側にユーザーがクリックできる X ボタンがあり、raw は削除されます。

名前: _ __ _ _ メールアドレス: _ __ _ __ _ +

名前: _ __ _ _ メールアドレス: _ __ _ __ _ X

保存 -

フォームの下部に [保存] ボタンがあります。ユーザーがそれを押すと、すべてのボックスの値が取得されて保存されます...これは問題ではありません。

私の問題は、動的フィールドを実装し、保存を押したときにフィールドから値を選択する方法です。

score 2 · Accepted Answer

デモこのコードを試してください：

   $(document).on("click",".add",function(){
       //take the id
       var id = parseInt($(this).attr('id').substr(4));
       id = id+1;
       //add new row I don't know if you have a table or div layout

       $(this).after('<p><input type="text name="name_'+id+'" id="name_'+id+'"/> <input type="text" name="email_'+id+'" id="email_'+id+'"/><input type="button" id="remove_'+id+'" class="remove" value="X"/><input type="button" class="add" id="add_'+id+'" value="+" /></p>');
    });
    $(document).on("click",".remove",function(){
       //take the id
       var id = $(this).attr('id').substr(7);
       //delete
       $("#name_"+id).remove();
       $("#email_"+id).remove();
       $("#add_"+id).remove();
       $("#remove_"+id).remove();
    });

あなたのhtml

  <p><input type="text name="name_1" id="name_1"/> <input type="text" name="email_1" id="email_1"/><input type="button" id="add_1" value="+" /></p>

score 1 · Accepted Answer

saveデータをサーバーに送信することを意味する場合は、フォーム全体を jQuery でシリアル化できますserialize()

AJAX 送信の例:

$(function(){
    $('#myForm').submit(function(){
       $.post('/path/to/server/', $(this).serialize(), function(response){
          /*do something with response if needed*/
       });
       /* prevent browser default submit*/
       return false;
    });
});

API リファレンス: http://api.jquery.com/serialize

saveローカルに保存する場合は、 serializeArray() http://api.jquery.com/serializearray/を使用できます

jquery - 動的フィールド値を取得する方法 - jQuery

2 に答える 2

Related

Reference