Django フォームセットに新しいフォームを動的に追加して、ユーザーが「追加」ボタンをクリックすると、JavaScript が実行され、新しいフォーム (フォームセットの一部) がページに追加されるようにしたいと考えています。
ベストアンサー1
私はこうやってやってますjQuery:
私のテンプレート:
<h3>My Services</h3>
{{ serviceFormset.management_form }}
{% for form in serviceFormset.forms %}
<div class='table'>
<table class='no_error'>
{{ form.as_table }}
</table>
</div>
{% endfor %}
<input type="button" value="Add More" id="add_more">
<script>
$('#add_more').click(function() {
cloneMore('div.table:last', 'service');
});
</script>
JavaScript ファイルの場合:
function cloneMore(selector, type) {
var newElement = $(selector).clone(true);
var total = $('#id_' + type + '-TOTAL_FORMS').val();
newElement.find(':input').each(function() {
var name = $(this).attr('name').replace('-' + (total-1) + '-','-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name': name, 'id': id}).val('').removeAttr('checked');
});
newElement.find('label').each(function() {
var newFor = $(this).attr('for').replace('-' + (total-1) + '-','-' + total + '-');
$(this).attr('for', newFor);
});
total++;
$('#id_' + type + '-TOTAL_FORMS').val(total);
$(selector).after(newElement);
}
機能:
cloneMore最初の引数としてを受け入れselector、type2 番目の引数としてフォームセットの を受け入れます。 は、selector複製するものを に渡す必要があります。この場合、 を渡して、div.table:lastjQuery が のクラスを持つ最後のテーブルを探すようにしますtable。:lastの部分は重要です。 は、selector新しいフォームが何の後に挿入されるかを決定するためにも が使用されるためです。おそらく、残りのフォームの最後に が必要になるでしょう。 引数は、実際のフォーム フィールドだけでなく、特に などのフィールドtypeを更新できるようにするためです。たとえば、モデルでいっぱいのフォームセットがある場合、管理フィールドの ID はとになり、フォーム フィールドは の形式になり、はフォーム番号で、 で始まります。したがって、引数を使用すると、関数は現在フォームがいくつあるかを確認し、新しいフォーム内のすべての入力とラベルを調べて、からなど、すべてのフィールド名/ID を置き換えます。完了すると、フィールドを更新して新しいフォームを反映し、セットの末尾に追加します。management_formTOTAL_FORMSClientid_clients-TOTAL_FORMSid_clients-INITIAL_FORMSid_clients-N-fieldnameN0typecloneMoreid_clients-(N)-nameid_clients-(N+1)-nameTOTAL_FORMS
この機能は、フォームセットにさらに多くのフォームを提供したい場合にアプリ全体で使用できるように設定されているため、私にとって特に役立ちます。また、フォームセット名とフォームがレイアウトされる形式を渡す限り、複製する非表示の「テンプレート」フォームを用意する必要がありません。