title: AJAX Post not sending form data
body: <p>I have the following <code>AJAX POST</code> below, for some reason looking at my logging (server side) the request it's sending is is blank <code>{}</code> not JSON data is sent. I have exhausted all possible  server side issues this is a client side issue with the script not sending data. why?</p>
  
  <p>bootstrap-wizard.js found here -> <a href="https://github.com/OrcaSystems/bootstrap-application-wizard/commit/a64498b7b19a950490c49b9f04d9841c92893b54" rel="nofollow">GitHub</a></p>
  
  <p><strong>My page code overrides the script submit:</strong></p>
  
  <pre><code>&lt;script src="{{ STATIC_URL }}js/bootstrap-wizard.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
     $(function() {
  
         var options = {width:1000};
         var wizard = $("#some-wizard").wizard(options);
  
          $("#open-wizard").click(function() {
          wizard.show();
      });
  
  
  wizard.on("submit", function(wizard) {
  
          $.ajax({
                    url: '/api/v1/rewards/campaigns/',
                    type: 'POST',
                    contentType: 'application/json; charset=UTF-8',
                    data: $('#wizard').serialize(),
                    beforeSend: function (request) {
  
                        request.setRequestHeader("X-CSRFToken", $('input[name="csrfmiddlewaretoken"]').val());
                    },
  
                    success: function(data, textStatus) {
                          wizard.submitSuccess(); // displays the success card
                          wizard.hideButtons(); // hides the next and back buttons
                          wizard.updateProgressBar(0); // sets the progress meter to 0
  
                        console.log('success');
  
                    },
                    error: function(errorThrown){
                       // data = JSON.parse(errorThrown.responseText);
  
                         wizard.submitError(); // display the error card
                         wizard.hideButtons(); // hides the next and back buttons
  
  
                        console.log(errorThrown);
                    }
                });
  
  
  
    });
  
  
  
     });
  
  
  
  &lt;/script&gt;
  </code></pre>
  
  <p><strong>This is my form:</strong></p>
  
  <pre><code>&lt;form action="" method="post" class="form-horizontal" id="wizard" enctype="application/json" &gt;
  {% csrf_token %}
  
  &lt;div class="wizard" id="some-wizard"&gt;
     &lt;h1&gt;{% trans "Setup Wizard" %}&lt;/h1&gt;
  
  
     &lt;div class="wizard-card" data-cardname="card1"&gt;
        &lt;h3&gt;{% trans "General" %}&lt;/h3&gt;
  
         etc, etc &lt;=== all my form fields here
  
     &lt;/div&gt;
  </code></pre>