Django：使用按钮添加动态表单集

Question

我正在寻找句柄Django formsets。我想在我的formset 中显示第一个表单，并且当我点击添加按钮时能够添加多个表单。

到目前为止，我使用extra=4 显示我的表单集，但我想设置extra=1 并在单击new form 按钮时添加额外内容。

在我的模板中：

{% block main %}

  <h2>{{title}}</h2>

  <div class="row publication-create">

    <form method="post" action="" enctype="multipart/form-data" novalidate class="col-md-8 col-md-offset-2">
      {% csrf_token %}
        <fieldset>
          <legend class="title"><span class="name">{% trans 'Publication form' %}</span></legend>
            {{ form|crispy }}
        </fieldset>
        <fieldset>
          <legend class="title"><span class="name">{% trans 'Document form' %}</span></legend>
          <button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseDocument" aria-expanded="false" aria-controls="collapseDocument">
            {% trans 'Add document(s)' %}
          </button>
          <div class="collapse" id="collapseDocument">
            <div class="card card-body">
            {{ document_form|crispy }}
            </div>
          </div>
        </fieldset>
      <br>
      <input type="submit" class="btn btn-default" value="{% trans 'Save' %}" />
      <a href="{{request.META.HTTP_REFERER}}" class="btn btn-default">{% trans 'Cancel' %}</a>
    </form>
  </div>

{% endblock main %}

在我的 forms.py 文件中：

DocumentFormSet = inlineformset_factory(Publication, Document, form=DocumentForm, extra=1)

我的观点是这样的：

class PublicationCreateView(EdqmCreateView):
    """ Create publication with document form through formset """
    model = Publication
    template_name = 'publication_form.html'

    def get_context_data(self, **kwargs):
        context = super(PublicationCreateView, self).get_context_data(**kwargs)
        context['document_form'] = DocumentFormSet(self.request.POST or None, self.request.FILES or None)
        return context

    def form_valid(self, form):
        context = self.get_context_data()
        document = context['document_form']
        if document.is_valid():
            self.object = form.save()
            document.instance = self.object
            document.save()
        return super(PublicationCreateView, self).form_valid(form)

    def get_success_url(self):
        return reverse('publication-list-crud')

结果：

使用我的代码，我添加了一个按钮，但这个按钮同时显示 4 个表单。我想一个接一个地展示它。 我想我需要 Javascript 代码？

谢谢！

我读了这篇文章：Dynamically adding a form to a Django formset with Ajax 但是我没有克服用我的脚本来重现这个例子。

Answer 1

由于您最多只需要 4 个表单，因此您可以使用 javascript 隐藏其中的 3 个，然后在用户单击按钮时逐步显示它们。

例子：

var forms = [
    document.getElementById("form1");
    document.getElementById("form2");
    document.getElementById("form3");
    document.getElementById("form4");
]
var addButton = document.getElementById("addButton");
for(var i = 0 ; i < 3 ; i++){
    forms[i+1].style.display = "none";
}
var actForm = 1;

addButton.onclick = function(){
    if(actForm < 4){
        forms[actForm].style.display = 'block';
        actForm++;
    }
}

你仍然需要弄清楚表单的 id，看看生成的 html，我知道 django 以某种模式添加了一些。

但是，这不是一个“好的”解决方案，因为它非常具体。 一种非常好的方法是使用 ajax 端点，它根据表单索引返回适当的 html。