小编典典

将表单动态添加到 Django 表单集

all

我想动态地将新表单添加到 Django 表单集,以便当用户单击“添加”按钮时,它会运行 JavaScript,将新表单(它是表单集的一部分)添加到页面。


阅读 67

收藏
2022-05-06

共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作为第一个参数,typeformset
的作为第二个参数。selector应该做的是将它应该复制的内容传递给它。在这种情况下,我传递它div.table:last以便 jQuery
查找最后一个具有table.
它的:last一部分很重要,因为selector它也用于确定将在之后插入新表单的内容。您很可能希望在其余表格的末尾使用它。该type参数是为了让我们可以更新management_form字段,特别是TOTAL_FORMS,以及实际的表单字段。如果您有一个充满Client模型的表单集,则管理字段的
ID 为id_clients-TOTAL_FORMSand id_clients- INITIAL_FORMS,而表单字段的格式为id_clients-N-fieldnamewithN是表格编号,以 .
开头0。因此,该函数使用type参数cloneMore查看当前有多少表单,并遍历新表单中的每个输入和标签,替换所有字段名称/id
之类的东西id_clients-(N)-name等等id_clients-(N+1)-name。完成后,它会更新TOTAL_FORMS字段以反映新表单并将其添加到集合的末尾。

这个功能对我特别有帮助,因为它的设置方式允许我在整个应用程序中使用它,当我想在一个表单集中提供更多表单时,并且不需要有一个隐藏的“模板”表单来复制只要我将表单集名称和表单布局格式传递给它。希望能帮助到你。

2022-05-06