"別のアイテムを追加"フォーム機能

Question

私は、ユーザーが自分のキャリア履歴を入力できるフォームを用意しています。タイプ（ドロップダウン）、詳細（テキストフィールド）、年（ドロップダウン）

基本的には、ユーザーが同じページに複数の項目を入力して、すべてを一度に送信できる動的な機能を追加したいと考えています。私はGoogleで検索していたし、いくつかの例を見つけましたが、それらはすべてのテーブルに基づいていた - 私のマークアップはDIVタグに基づいています。

<div class="form-fields"> 

<div class="row"> 
    <label for="type">Type</label> 
    <select id="type" name="type"> 
     <option value="Work">Work</option> 
    </select> 
</div> 

<div class="row"> 
    <label for="details">Details</label> 
    <input id="details" type="text" name="details" /> 
</div> 

<div class="row"> 
    <label for="year">Year</label> 
    <select id="year" name="year"> 
     <option value="2010">2010</option> 
    </select> 
</div> 

</div> 

だから、基本的に必要なクラス「行」で3 DIVタグが重複する、または単純化するために、divの "form-fields"をそのまま複製することができます。また、入力名が配列形式に変換されなければならないことも知っています。

さらに、各項目には「削除」ボタンが必要です。すべてのデータを送信するメイン送信ボタンが下部に表示されます。

誰もがこれに対して洗練された解決策を得ましたか？

Answer 1

一つのアプローチは、次のとおりです。

$('<span class="add">+</span>').appendTo('.form-fields:last'); 
$('.add').live('click', 
       function(){ 
        $('.form-fields:first') 
         .clone() 
         .insertAfter('.form-fields:last'); 
        $('.add').remove(); 
        $('<span class="add">+</span>') 
         .appendTo('.form-fields:last'); 
       }); 

JS Fiddle demo

それはしかし、特にきれいではありません。ユニークなidの必要性をまだ説明していません。

Answer 2

私はこれをかなり定期的に行っています。

1. 最新バージョンのJQueryに付属のテンプレートを使用してください。

2. すべての必要なデータをサーバーから前後に渡すJSONオブジェクトを渡します。

   var data = {items：[{id：1234、work： "work"、詳細： "details"、year： "2010"}]}};

3. 特定のプロパティの一意のIDを作成できるjavascript関数を作成します。

   function GetFieldId（type、id、prop）{ return [type、id、prop] .join（ "_"）; }

4. テンプレートで、上記の関数を使用して、ユーザーが操作できる各要素にIDを追加します。オブジェクトに実際には存在しない「プロパティ」を作成すると、ボタンなどの要素でうまく機能します。

5. JQueryデリゲートを使用して、idを持つすべての入力に対して「変更」ハンドラを作成します。

6. 変更ハンドラで、idを引き離して、適切なオブジェクトを見つけて、作業に行きます。

7. アイテムを追加するには、新しいオブジェクトを作成し、適切なJSON配列にスローし、テンプレートをレンダリングして、ページの正しい場所にドロップします。

8. オブジェクトを削除するには、オブジェクトに「IsDeleted」プロパティを追加し、HTML要素を削除します。

9. 節約では、このJSONオブジェクトをサーバー上にプッシュし、サーバー上で解析して適切な処理を行います。

Answer 3

HTML：

<div class="form-fields"> 
    <div class="row"> 
    <label>Type 
     <select name="type[0]"> 
     <option value="Work">Work</option> 
     </select> 
    </label> 
    </div> 
    <div class="row"> 
    <label>Details 
     <input type="text" name="details[0]" /> 
    </label> 
    </div> 
    <div class="row"> 
    <label>Year 
     <select id="year" name="year[0]"> 
     <option value="2010">2010</option> 
     </select> 
    </label> 
    </div> 
</div> 

JS：

var counter = 0, formFieldsString = '<div class="form-fields"...'; 

function addNew() 
{ 
    $(formFieldString.replace('[0]', '['+(++counter)+']')).appendTo('#form-fields-parent'); 
} 

Answer 4

私はjQueryとASP.NETの組み合わせを使用して、このような何かを。

まず、「行」を含むASP.NET（* .ascx）の部分ページをコードします。あなたの場合、3つのアイテムが一緒になっているので、それらのアイテムはすべて1つの行と見なすことができます。 （あなたは一緒に属しているように見えるようにCSSスタイルを使うことができます）また、行の最後にプラス記号を置いて、ユーザーがそのプラス記号をクリックすると新しい行を追加できるようにします（それ以上は2番目に）。

いずれにしても、ページに部分行を追加して開始します。 （私は厳密に型指定されたページを使用して、モデルをループして部分ページに個々の行を渡すことができます）。これをすべてテーブルに表示します。 （私の場合、それはタブーデータで表されますが、そうである必要はありません）

プラス記号は、ユーザーがクリックすると、部分ページに基づいて新しい行が追加されます。これらの線に沿って何か：

personAdd($('#addPerson'), '#personInformation'); 

function personAdd(personDiv, tableName) { 
    personDiv.live('click', function() { 
     $.ajax({ 
      url: this.href, 
      cache: false, 
      success: function (html) { $(tableName + ' > tbody:last').append(html); } 
     }); 

     $(this).replaceWith('<img alt="Delete Person" class="deleteImg" src="/Content/Images/remove_delete_cancel_clear.png" />'); 

     return false; 
    }); 
} 

これは、新しい行を追加し、前の行は削除することができるように、「削除画像」（赤X）に前の行を変更します。私はこのjQueryを使って、そのビットを扱う：すべてが強く型付けされ

// Allow rows to be deleted. 
$('.deleteImg').live('click', function() { 
    $(this).closest('tr').remove(); 
}); 

ので、私は先に行くと、フォームを送信するとき、それはかなりうまく動作します。私はこれが助けてあなたを始めさせる、あるいはおそらく他の人を助けることを望みます。ご不明な点がございましたらお知らせください。