django form ajax,使用Ajax将表单动态添加到Django表单集中

最新推荐文章于 2024-10-28 09:06:38 发布

DCNS梦局-法舰局

最新推荐文章于 2024-10-28 09:06:38 发布

阅读量226

点赞数

文章标签： django form ajax

这篇博客介绍了如何利用jQuery实现动态克隆表单的功能。通过`cloneMore`函数，可以复制并更新表单集中的最后一个表格，同时更新管理表单的`TOTAL_FORMS`字段，确保所有输入和标签的ID正确递增。该方法适用于需要在表单集中添加更多表单的情况，提高了代码复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

小编典典

这就是我使用jQuery的方式：

我的模板：

My Services

{% for form in serviceFormset.forms %}

{% endfor %}

$('#add_more').click(function() {

cloneMore('div.table:last', 'service');

});

在一个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_FORMS和id_clients-INITIAL_FORMS，而表单字段的格式为id_clients-N-fieldnamewithN是表格编号，以开头0。因此，使用该type参数，该cloneMore函数将查看当前有多少个表单，并遍历新表单中的每个输入和标签，从而替换诸如id_clients-(N)-nameto id_clients-(N+1)-name等的所有字段名称/ id 。完成后，它将更新TOTAL_FORMS字段以反映新表单并将其添加到集合的末尾。

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

2020-03-25