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

时间:2018-10-16 07:44:16

标签: javascript django django-forms formset

我正在寻找手柄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 但是我并没有克服用我的脚本重现示例的问题。

1 个答案:

答案 0 :(得分:0)

由于您只需要最多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。