アップデート
進行中のソリューションを整理し、いくつかの詳細を追加しました
テンプレートに基づいてクローンを作成するフォーム領域があります。フォームが順序どおりに送信されるようにするために、スクリプトは送信時にフォームを調べ、現在のバッチ セットを定義する番号を追加します。以下は、何が起こっているかを単純化しすぎた表現です。
<form>
<div class="batch-template">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
<div class="batch-paste-area">
</div>
</form>
ページの開始時:
- 「batch-template」の内容をオブジェクト変数に格納
- 元のテンプレートがページから削除されます
- テンプレートのインスタンスが「バッチ貼り付け領域」に追加されます
以下は、2 回クリックした後に作成される出力の例です。
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
</form>
フォームの送信に関しては、シリアル化の前に、スクリプトが「バッチ貼り付け領域」内の各「バッチピース」をループし、各フォーム フィールド名の末尾にカウント値を追加するようにしたいと考えています。上記のセットを続けると、結果は (ブラウザには) 以下のように表示されます。
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input1">
<input name="another-test-input1">
<select name="a-drop-down1">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input2">
<input name="another-test-input2">
<select name="a-drop-down2">
</div>
</div>
</form>
これまでのところ、貼り付け領域内のすべての入力をループするか、最後の入力のみを選択することができます。
最後のバッチピースを選択するのは簡単です:
var intCount = 1;
$('.batch-paste-area .batch-piece').each(function(){
/*
* Would like to be able to loop through form fields here
* Below is an attempt to select all form fields for current set
*/
$(this + ' input, '+ this + ' select').each(function() {
var strName = $(this).attr('name') + intCount;
$(this).attr('name', strName);
});
intCount++;
});