title: Handle POST/GET forms with Django and Bootstrap Modal
body: <p>I'm using different <code>forms</code> (<code>POST</code> and <code>GET</code>) in my <code>Django</code> web application and <code>Bootstrap modal</code> to do that.</p>
  
  <p>In my template, user can choose some documents, submit the list of documents which is picked up to a Django form (<code>CustomerForm</code>) in my modal. This CustomerForm lets to send an email with user informations previously filled.</p>
  
  <p>My CustomerForm looks like this :</p>
  
  <pre><code>class CustomerForm(forms.ModelForm):
  
      def __init__(self, *args, **kwargs):
          super(CustomerForm, self).__init__(*args, **kwargs)
          self.fields['country'].empty_label = _('Select a country')
          self.fields['country'].queryset = self.fields['country'].queryset.order_by('name')
          self.fields['email'].required = True
          self.fields['first_name'].required = True
          self.fields['last_name'].required = True
          self.fields['country'].required = True
          self.fields['institution'].required = False
  
      class Meta:
          model = Customer
          fields = ['email', 'first_name', 'last_name', 'country', 'institution']
          widgets = {
              'email': forms.TextInput(attrs={'placeholder': _('name@example.com')}),
              'first_name': forms.TextInput(attrs={'placeholder': _('First Name')}),
              'last_name': forms.TextInput(attrs={'placeholder': _('Last Name')}),
              'institution': forms.TextInput(attrs={'placeholder': _('Agency, company, academic or other affiliation')}),
          }
  </code></pre>
  
  <p>I have views.py file :</p>
  
  <pre><code>class HomeView(CreateView, FormView):
      """ Render the home page """
  
      template_name = 'index.html'
      form_class = CustomerForm
  
      def get_context_data(self, **kwargs):
  
          # display some things 
          # ...
  
          if "DocumentSelected" in self.request.GET:
              checkbox_list = self.request.GET.getlist('DocumentChoice')
              document = Document.objects.filter(id__in=checkbox_list)
              kwargs['selected_document'] = document
  
          return super(HomeView, self).get_context_data(**kwargs)
  
      def form_valid(self, form):
          email = form.cleaned_data['email']
          country = form.cleaned_data['country']
  
          for checkbox in self.request.GET.getlist('DocumentChoice'):
              document = Document.objects.get(id=checkbox)
              token = self.gen_token(email)
  
              now = timezone.now()
              expiration = now + settings.DOWNLOAD_VALIDITY
              Download.objects.create(email=email, country=country, doc_id=checkbox, token=token,
                                      expiration_date=expiration)
  
              self.send_email(email, document.upload, document.publication.title, token)
  
          return super(HomeView, self).form_valid(form)
  </code></pre>
  
  <p>And finally in my HTML template you can find something which looks like this :</p>
  
  <pre><code>&lt;form method="GET" action=""&gt;
  
      &lt;!-- Table with checkboxes - User has to check wanted objects --&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-offset-3 col-md-4"&gt;
              &lt;input type="submit" class="btn btn-default" name="DocumentSelected" value="{% trans 'Save document(s)' %}"/&gt;
              &lt;input type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal" value="{% trans 'Send document(s)' %}"/&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/form&gt; 
  
  &lt;!-- Modal --&gt;
    &lt;div class="modal fade" id="myModal" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
  
        &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h4 class="modal-title"&gt;{% trans 'Your informations' %}&lt;/h4&gt;
          &lt;/div&gt;
          &lt;form method="post" action="" novalidate&gt;
            {% csrf_token %}
            &lt;div class="modal-body"&gt;
              &lt;div class="row"&gt;
                &lt;div class="col-md-12"&gt;
                  {{ form.email|as_crispy_field }}
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="col-md-6"&gt;
                  {{ form.first_name|as_crispy_field }}
                &lt;/div&gt;
                &lt;div class="col-md-6"&gt;
                  {{ form.last_name|as_crispy_field }}
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="row"&gt;
                &lt;div class="col-md-6"&gt;
                  {{ form.country|as_crispy_field }}
                &lt;/div&gt;
                &lt;div class="col-md-6"&gt;
                  {{ form.institution|as_crispy_field }}
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class="modal-header"&gt;
              &lt;h4 class="modal-title"&gt;{% trans 'Your cart' %}&lt;/h4&gt;
            &lt;/div&gt;
            &lt;div class="model-body"&gt;
              {% for element in selected_document|dictsort:'format' %}
                &lt;!-- Display wanted objects --&gt;
              {% endfor %}
            &lt;/div&gt;
            &lt;div class="modal-footer"&gt;
              &lt;input type="submit" class="btn btn-default" data-dismiss="modal" value="{% trans 'Send' %}"/&gt;
            &lt;/div&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Process :</strong></p>
  
  <p>This is the needed way :</p>
  
  <ul>
  <li>User has to check one or multiple documents</li>
  <li>User submits the choice and a modal containing CustomerForm is opening.</li>
  <li>User fills CustomerForm fields and see in <code>Cart part</code> his document(s)</li>
  <li>User submits the CustomerForm and an email is sent with previous informations/documents.</li>
  </ul>
  
  <p>I think my method could work, but I don't overcome to call <code>form_valid</code> function and I would like to write correctly this class.</p>
  
  <p>There is certainly ugly issues and I apologize by advance. But this is not the best way to improve myself and doesn't reproduce these issues ? ;)</p>
  
  <p>Thanks !</p>
  
  <p><strong>EDIT :</strong></p>
  
  <p>I made something which seems to work. I removed <code>data-dismiss="modal"</code> from my modal submit button. I read that this attribute closed my modal and didn't post any form !
  Finally, is it a good way to do what I did ?</p>
  
  <p>Is it possible to replace both buttons <code>Save documents</code> and <code>Send documents</code> by an unique button which get documents and open the modal ?</p>