使用Ajax动态地将表单添加到Django表单集

我的模板：

<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作为第一个参数，formset的类型作为第二个参数。选择器应该做什么是传递它应该重复。在这种情况下，我传递它div.table：最后，使jQuery寻找最后一个表类的表。它的最后一部分很重要，因为选择器也用于确定新的表单将被插入后。很可能你想要它在剩下的形式的结尾。类型参数是这样的，我们可以更新management_form字段，特别是TOTAL_FORMS，以及实际的表单字段。如果您有一个表格集，例如Client模型，管理字段将具有id_clients-TOTAL_FORMS和id_clients-INITIAL_FORMS的ID，而表单字段将采用id_clients-N-fieldname的格式，其中N是表单编号，因此，通过类型参数，cloneMore函数查看当前有多少个表单，并通过新表单中的每个输入和标签，将所有字段名/ id从id_clients-(N)-name替换为id_clients-(N 1)-name等。完成后，它更新TOTAL_FORMS字段以反映新表单，并将其添加到集合的末尾。

这个函数对我特别有帮助，因为它的设置它允许我在整个应用程序中使用它，当我想在一个formset提供更多的形式，并不使我需要一个隐藏的“模板”形式复制只要我传递formset名称和格式布局的格式。希望它有帮助。