您好, 欢迎来到 !    登录 | 注册 | | 设为首页 | 收藏本站

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

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

这就是我使用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:lastjQuery,以查找带有类的最后一个table。它的:last一部分很重要,因为selector还可用于确定将在其后插入新表格的内容。你很可能希望在其余表格的末尾使用它。该type论点是,这样我们就可以更新management_form领域,特别是TOTAL_FORMS,还有实际的表单字段。如果你有一个充满Client模型的表单集,则管理字段的ID为id_clients-TOTAL_FORMSid_clients-INITIAL_FORMS,而表单字段的格式为id_clients-N-fieldnamewithN是表格编号,以开头0。因此,使用该type参数,该cloneMore函数将查看当前有多少个表单,并遍历新表单中的每个输入和标签,从而替换诸如id_clients-(N)-nameto id_clients-(N+1)-name等的所有字段名称/ id 。完成后,它将更新TOTAL_FORMS字段以反映新表单并将其添加到集合的末尾。

功能对我特别有用,因为它的设置方式使我可以在整个应用程序中使用它(当我想在表单集中提供更多表单时),而不必让我需要隐藏的“模板”表单来进行复制只要我通过它,表单集名称和表单的布局格式。希望能帮助到你。

Go 2022/1/1 18:22:21 有367人围观

撰写回答


你尚未登录,登录后可以

和开发者交流问题的细节

关注并接收问题和回答的更新提醒

参与内容的编辑和改进,让解决方法与时俱进

请先登录

推荐问题


联系我
置顶