フォーム内のJquery +動的追加行

Question

私はフォームフィールドに入力されたデータを、何かが入力されたときやいつでもデータベースに動的に挿入するフォームを作成しています。私は現在、フォームに動的行を追加する作業を行っています（つまり、追加情報を追加する必要がある場合は既存の行を複製します）。私は2つの問題に遭遇しました。 （次を挿入する前に）元の行を正常に動作しますが、私は、なぜ新しい行を見つけ出すように見えることはできません。

function addFormField() { 
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>"); 
} 

問題1：

私が使用しているコードは次のように基づいています入力ぼかし関数を使って$ .post経由でデータを送信しようとしていません。実際の$ .postコードがドキュメント上に読み込まれ、クリックイベントの後にフォームフィールドが表示されるので、これを無視しているため、すべてが同じ名前を持っているかどうかです。

問題2：新しく追加された行のデータを挿入するには、のフォームフィールドをループするためにjquery.eachを使用する必要がありますか？は同じ名前/

まあ、この時点ではどんな提案も良いでしょう - 頭を掻く時間！

Answer 1

同じIDと名前を使用しないでください。正しい方向に向かいます。同じIDを使用するのは有効なHTMLではありません。

また、jQuery.serialize（）であるか標準的なPOSTであろうと、データを投稿するときには、情報を処理する方がずっと簡単です。

function addFormField() { 
$("#divTxt").append("<div id='education" + id + "'><input name='name' id='name' type='text' size='20'><a href='#' onClick='removeFormField(\"#education" + id + "\"); return false;'><img src='images/minus.gif' width='10px' border=0></img></a></div>"); 
} 

コードを見ると、DOMを使用して削除するフィールドを参照することもできます。うまくいけば、これであなたが持っていたIDの必要性がなくなります。

これは次のようになります。

function addFormField(index) { 
$("#divTxt").append("<div ><input name='name"+index+"' type='text' size='20'><a href='#' onClick='$(this.parentNode).remove()'><img src='images/minus.gif' width='10px' border=0></img></a></div>"); 
}