2

ページの読み込みが完了した後に jQ によって DOM に追加された動的要素を含むフォームを送信しようとしています。

フォームで serialize() を実行すると、ページにハードコードされているすべてのフィールドのデータが取得されますが、動的フィールドは取得されません。

同じコードの一部を次に示します。

HTML

<form id="someform" name="someform" method="post" action"">
    <input type="text" name="afield" />
 <ul id="somelist">
 </ul>
 <input type="submit" name="submit" />
</form>

<img id="add" src="add-button.png" />

<div class="new_unit" style="display:none">
 <input type="text" name="somefield" />
</div>

JavaScript 

<script type="text/javascript">
// Adds a new field to the form
$( '#add' ).click( function() {
 $( '#somelist' ).append( '<li>' + $( '.new_unit' ).html() + '</li>' );
});

// Validate before submission
$( '#someform' ).validate({
 .......,
 .....,
 submitHandler: submit_form
});

function submit_form() {
 _data = $( '#someform' ).serialize();
 alert( _data );
}
</script>

送信ボタンを押すと、静的フィールドのデータ、フィールドが表示されます...しかし、jQueryによって追加されたいくつかのフィールドは表示されません。

ここで同様の質問がいくつか見つかりました。提案された解決策に準拠していますが、効果はありません。

私は最新の jQuery (1.4.1) を使用しており、live() イベント バインダーで遊ぶことを検討しています。この問題の解決に役立つかもしれないと感じていますが、validate() プラグインと組み合わせて使用​​する方法がわかりません。

助言がありますか ？

ありがとう、m^e

4

1 に答える 1

4

問題は、動的に追加されたフィールドがすべて同じ名前になっていることです。それらに異なる名前を付ける必要があるか、サーバーで使用するものに応じて、それらsomefield[]を集約するような名前を付けることができます (PHP と Python がこれを処理すると信じています)。

それらに別の名前を付けるには、これを行う方が少し簡単かもしれません:

<input type="text" id="copy" />

と：

$("#add").click(function() {
  $("#copy").clone().removeAttr("id").attr("name", "field[]")
    .appendTo("#somelist").wrap("<li>")
});
于 2010-01-28T03:29:10.997 に答える