title: Bootstrap Modal Forms Posting Twice Django
body: <p>I am following the instructions from <a href="https://pypi.org/project/django-bootstrap-modal-forms/" rel="nofollow noreferrer">django-bootstrap-modal-forms</a> and what I am finding is that my form is posting or submitting twice when I submit the form.  First, the object was simply being created twice, I could see that from the admin.  Now it seems the form is creating the object, but also entering its validation state, which I obviously don't want if the form was successful, which it is.</p>
  
  <p>Has anyone experienced this? I've done nothing more than what was outlined in the docs that I linked to and I cannot identify any reason why this should be submitting twice. </p>
  
  <p>Here is my code:</p>
  
  <p>home.html</p>
  
  <pre><code>&lt;a href="#" class="create-shipment dropdown-itemcreatenew" onclick="closeNav()"&gt;Shipment&lt;/a&gt;
  
  &lt;div class="modal fade" tabindex="-1" role="dialog" id="modal"&gt;
    &lt;div class="modal-dialog" role="document"&gt;
      &lt;div class="modal-content"&gt;
  
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  $(document).ready(function() {
  
      $(".create-shipment").modalForm({
          formURL: "{% url 'CreateShipmentView' %}"
      });
  
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>views.py</p>
  
  <pre><code>class CreateShipmentView(BSModalCreateView):
      template_name = 'create_shipment.html'
      form_class = CreateShipmentForm
      success_message = 'Success: Shipment Has Been Created!'
      success_url = reverse_lazy('HomeView')
  </code></pre>
  
  <p>create_shipment.html (template for modal form)</p>
  
  <pre><code>{% load crispy_forms_tags %}
  &lt;form method="post" action=""&gt;
    {% csrf_token %}
  
   &lt;div class="modal-header"&gt;
      &lt;h5 class="modal-title"&gt;Create New Shipment&lt;/h5&gt;
      &lt;button type="button" class="close" data-dismiss="modal" aria-label="Close"&gt;
        &lt;span aria-hidden="true"&gt;&amp;times;&lt;/span&gt;
      &lt;/button&gt;
    &lt;/div&gt;
  
    &lt;div class="modal-body"&gt;
      {{form|crispy}}
    &lt;/div&gt;
  
    &lt;div class="modal-footer"&gt;
      &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
      &lt;button type="button" class="submit-btn btn btn-primary"&gt;Create&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>
  
  <p>forms.py</p>
  
  <pre><code>class CreateShipmentForm(BSModalForm):
      class Meta:
          model = Shipment
          fields = ['Reference_Number', 'Ultimate_Consignee']
  </code></pre>
  
  <p>urls.py</p>
  
  <pre><code>url(r'^create_shipment/', views.CreateShipmentView.as_view(), name='CreateShipmentView'),
  </code></pre>
  
  <p>Event Listeners on Submit Button</p>
  
  <pre><code> // Add click listener to the submitBtn
      var ajaxSubmit = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn) {
          $(submitBtn).on("click", function () {
              // Check if form.is_valid() via ajax request when submitBtn is clicked
              isFormValid(modalID, modalContent, modalForm, formURL, errorClass, submitBtn, submitForm);
          });
      };
  
      // Check if form.is_valid() &amp; either show errors or submit it
      var isFormValid = function (modalID, modalContent, modalForm, formURL, errorClass, submitBtn, callback) {
          $.ajax({
              type: $(modalForm).attr("method"),
              url: $(modalForm).attr("action"),
              // Serialize form data
              data: $(modalForm).serialize(),
              success: function (response) {
                  if ($(response).find(errorClass).length &gt; 0) {
                      // Form is not valid, update it with errors
                      $(modalID).find(modalContent).html(response);
                      $(modalForm).attr("action", formURL);
                      // Reinstantiate click listener on submitBtn
                      ajaxSubmit(modalID, modalContent, modalForm, formURL, errorClass, submitBtn);
                  } else {
                      // Form is valid, submit it
                      callback(modalForm);
                  }
              }
          });
      };
  </code></pre>