向Django表单集动态添加表单

这就是我如何使用jQuery实现的：

我的模板：

&lt；h3&gt；我的服务&lt/h3&gt；
{{serviceFormset.management_form}
{serviceFormset.forms%中表单的%s}
&lt；div class='table'&gt；
&lt；表class='无错误'&gt；
{{form.as_table}}
&lt/表&gt；
&lt/部门&gt；
{%endfor%}
&lt；输入type=“button”value=“Add More”id=“Add\u More”&gt；
&lt；脚本&gt；
$（“#添加更多”）。单击（函数（）{
cloneMore（‘分区表：最后一个’、‘服务’）；
});
&lt/脚本&gt；

在javascript文件中：

函数cloneMore（选择器，类型）{
var newElement=$（选择器）.clone（true）；
var total=$（'#id'+type+'-total_FORMS'）.val（）；
newElement.find（':input'）.each（function（）{
变量名称=$（this.attr（'name'）.replace（'-'+（total-1）+'-'，'-'+total+'-'）；
变量id='id_u'+名称；
$（this.attr（{'name'：name，'id'：id}）.val（''）.removeAttr（'checked'）；
});
newElement.find（'label'）。每个（函数（）{
var newFor=$（this.attr（'for'）.replace（'-'+（total-1）+'-'，'-'+total+'-'）；
$（this.attr（'for'，newFor））；
});
总计++；
$（'#id'+type+'-TOTAL_FORMS'）.val（总计）；
$（选择器）.after（新元素）；
}

它的作用是：

cloneMore接受selector作为第一个参数，formset的类型作为第二个参数。选择器应该做的是传递它应该复制的内容。在本例中，我将其传递给div.table:last，以便jQuery使用table类查找最后一个表。：它的最后一部分很重要，因为选择器也用于确定新表单将插入的内容。你很可能希望它出现在其他表单的末尾。type参数用于更新管理表单字段，尤其是总计表单，以及实际表单字段。如果您有一个表单集，比如说，Client模型，那么管理字段的id将是id\u clients-TOTAL\u FORMS和id\u clients-INITIAL\u FORMS，而表单字段的格式将是id\u clients-N-fieldname，其中N是表单编号，从0开始。因此，使用type参数，cloneMore函数查看当前有多少个表单，并遍历新表单中的每个输入和标签，替换从id\u clients-（N）-name到id\u clients-（N+1）-name之类的所有字段名/id。完成后，它更新TOTAL_FORMS字段以反映新表单，并将其添加到集合的末尾