title: Django : Add dynamical formset with button
body: <p>I'm looking for handle <code>Django formsets</code>. I would like to display the first form in my <code>formset</code> and be able to add multiple forms when I click over the adding button.</p>
  
  <p>Up to now, I display my formset with <code>extra=4</code> but I would like to set <code>extra=1</code> and add extra when I click on <code>new form</code> button.</p>
  
  <p>In my template I have :</p>
  
  <pre><code>{% block main %}
  
    &lt;h2&gt;{{title}}&lt;/h2&gt;
  
    &lt;div class="row publication-create"&gt;
  
      &lt;form method="post" action="" enctype="multipart/form-data" novalidate class="col-md-8 col-md-offset-2"&gt;
        {% csrf_token %}
          &lt;fieldset&gt;
            &lt;legend class="title"&gt;&lt;span class="name"&gt;{% trans 'Publication form' %}&lt;/span&gt;&lt;/legend&gt;
              {{ form|crispy }}
          &lt;/fieldset&gt;
          &lt;fieldset&gt;
            &lt;legend class="title"&gt;&lt;span class="name"&gt;{% trans 'Document form' %}&lt;/span&gt;&lt;/legend&gt;
            &lt;button class="btn btn-default" type="button" data-toggle="collapse" data-target="#collapseDocument" aria-expanded="false" aria-controls="collapseDocument"&gt;
              {% trans 'Add document(s)' %}
            &lt;/button&gt;
            &lt;div class="collapse" id="collapseDocument"&gt;
              &lt;div class="card card-body"&gt;
              {{ document_form|crispy }}
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/fieldset&gt;
        &lt;br&gt;
        &lt;input type="submit" class="btn btn-default" value="{% trans 'Save' %}" /&gt;
        &lt;a href="{{request.META.HTTP_REFERER}}" class="btn btn-default"&gt;{% trans 'Cancel' %}&lt;/a&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  
  {% endblock main %}
  </code></pre>
  
  <p>In my forms.py file I have :</p>
  
  <pre><code>DocumentFormSet = inlineformset_factory(Publication, Document, form=DocumentForm, extra=1)
  </code></pre>
  
  <p>And my view looks like this :</p>
  
  <pre><code>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')
  </code></pre>
  
  <p><strong>Result :</strong></p>
  
  <p>With my code, I added a button, but this button display 4 forms at the same time. I would like to display it one after the other.
  I think I need Javascript code ?</p>
  
  <p>Thank you !</p>
  
  <p>I read this post : <a href="https://stackoverflow.com/questions/501719/dynamically-adding-a-form-to-a-django-formset-with-ajax?rq=1">Dynamically adding a form to a Django formset with Ajax</a>
  But I don't overcome to reproduce the example with my script.</p>