以正确的方式使用javascript将动态表单添加到Django表单集中

以正确的方式使用javascript将动态表单添加到Django表单集中

自我解答基于Nick Lang的这篇文章，但是我们将简化这种方式，并且不再需要复制/粘贴整个html格式。

我们有一个内联表单集，它是在如下视图中创建的：

items_formset = inlineformset_factory(Parent, Item, form=ItemForm, extra=1)item_forms = items_formset()

接下来，我们需要为formset表单创建一个模板，我们可以使用

empty_form

formset实例的属性来执行此 *** 作，该属性会生成一个html表单模板，其中表单的每个“
id”数字都由

__prefix__

字符串替换，例如：

<!--{{ item_forms.empty_form }}{# <!-- or for crispy forms --> {% crispy item_forms.empty_form item_forms.form.helper %} #}-->

因此，首先我们需要

__prefix__

用一个ID替换它，并使用此模板添加一个表单。
这是一个表单模板代码片段，可用于创建新元素：

<script type="text/html" id="item-template"><div id="item-__prefix__">    {{ item_forms.empty_form }}    <!-- crispy: {% crispy item_forms.empty_form item_forms.form.helper %} --></div></script>

然后，我们需要显示表单的主要部分：

<form action="" method="post">{% csrf_token %}{{ item_forms.management_form }}<div id="items-form-container">    {% for item_form in item_forms %}        <div id="item-{{ forloop.counter0 }}"> {{ item_form.id }} {{ item_form.as_p }} {# <!-- or for crispy forms --> {% crispy item_form %} #}        </div>    {% endfor %}</div><a href="#" id="add-item-button" >Add Item</a></form>

最后，我们需要添加一些JS（通过1.9.1和2.1.0测试的jQuery）以添加下一个formset表单。请注意，我们不会使用

underscore.js

，因为在这种情况下是不需要的：只需用str.replace替换

__prefix__

下一个“
id”数字）

<script>$(document).ready(function() {    $('.add-item').click(function(ev) {        ev.preventDefault();        var count = $('#items-form-container').children().length;        var tmplMarkup = $('#item-template').html();        var compiledTmpl = tmplMarkup.replace(/__prefix__/g, count);        $('div#items-form-container').append(compiledTmpl);        // update form count        $('#id_item_items-TOTAL_FORMS').attr('value', count+1);        // some animate to scroll to view our new form        $('html, body').animate({     scrollTop: $("#add-item-button").position().top-200 }, 800);    });});</script>

就这样，只需单击“添加项目”按钮，就会出现一个新的表单集项目。

确保用您的app_name / model_name替换此样本。