ユーザーがフィールドのブロックを自動的に追加できるフォームがあります。さまざまな理由から、これらのフィールドをブロック内の他のフィールドに関連付ける必要があります。以下に示すように、各ブロックのすべてのフィールドを配列に配置することでこれを達成しています
<select name="items[0][item_type]" class="item_type">
<option value="0">Bulding / Landscaping</option>
<option value="1">Full / Thin Veneer</option>
</select>
<select class="select_custom" name="items[0][standard]">
<option value="0">Standard</option>
<option value="1">Custom</option>
</select>
これArray ( [0] => Array ( [item_type] => 0 [standard] => 1 ) )
により、バックエンドでデータを簡単に処理できるようなものが返されます。
問題は、これを機能させるために配列インデックスを指定する必要があることです。上記のようなフィールドの新しいブロックを追加するときは、すべてのインデックスを変更する方法が必要items[][fieldname]
です。
以下は、入力のブロックをドキュメントに追加するために使用するコードです。それらはすべて div に含まれているため、その div を複製して最後の div の後に追加するだけです。
$('#more_fields').click(function(){
$('.field_group:first').clone(true).hide().insertAfter('.field_group:last').slideDown('slow');
var last = $('.field_group:last');
last.append(new_button.clone(true));
last.find('select').val([]);
last.find(".custom_products").css("display","none");
last.find(".unit_selection").css("display","none");
last.find(".landscape_selection").css("display","none");
last.find(".veneer_selection").css("display","none");
last.find(".comments_section").css("display","none");
last.find(".standard").css('display','none');
});