Вот как я это делаю, используя 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
в качестве первого аргумента, а type
набора форм - в качестве второго. То, что selector
должен сделать, это передать то, что он должен дублировать. В этом случае я передаю его div.table:last
, чтобы jQuery искал последнюю таблицу с классом table
. Часть :last
важна, потому что selector
также используется для определения, какая новая форма будет вставлена после. Скорее всего, вы захотите это в конце остальных форм. Аргумент type
таков, что мы можем обновить поле management_form
, особенно TOTAL_FORMS
, а также фактические поля формы. Если у вас есть форма, полная, скажем, Client
моделей, поля управления будут иметь идентификаторы id_clients-TOTAL_FORMS
и id_clients-INITIAL_FORMS
, тогда как поля формы будут иметь формат id_clients-N-fieldname
с формой N
номер, начинающийся с 0
. Таким образом, с аргументом type
функция cloneMore
проверяет, сколько форм в настоящее время существует, и проходит через каждый ввод и метку внутри новой формы, заменяя все имена / идентификаторы полей с чем-то вроде id_clients-(N)-name
на id_clients-(N+1)-name
и скоро. После завершения он обновляет поле TOTAL_FORMS
, чтобы отразить новую форму, и добавляет его в конец набора.
Эта функция особенно полезна для меня, потому что способ ее настройки позволяет использовать ее в приложении, когда я хочу предоставить больше форм в наборе форм, и не требует от меня скрытого «шаблона». дублировать форму, пока я передаю ее, имя набора форм и формат, в котором выложены формы. Надеюсь, это поможет.