title: jQuery AJAX submission with form values
body: <p>I've written some jQuery code which sends an AJAX request to my CMS to fire off different PHP actions depending on what action is sent in the request. </p>
  
  <p>This is working fine, however the values of the form are not being sent with the AJAX post. I've tried various different methods such as new form and serializing the form data but nothing seems to be working for me.</p>
  
  <p>I assumed that just including this into the call was going to be enough:</p>
  
  <pre><code>$formData = $('#checkout-cart').serialize();
  data: $formData,  
  </code></pre>
  
  <p>Can anyone point me in the right direction please?</p>
  
  <pre><code>var formSubmit = {
      config: {
          guestUser: '.create-guest-user',
      },
      initialize: function () {
          var $this = this;
          $(this.config.guestUser).click(function(event) {
              event.preventDefault();
              $this.createGuestUser();
              return false;
          });
      },
      // Create Guest User
      createGuestUser: function (elem) {
          $.post(window.location.href, {
              type: 'ajax',
              data: $formData,
              url: window.location.href,
              action: 'createGuestUser',
          }).done(function (response) {
              $('.create-guest-user').addClass('disabled');
          });
      }
  };
  
  $(document).ready(function () {
      formSubmit.initialize();
  });
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;form id="checkout-form" action="cart/checkout/" method="post"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;fieldset id="account"&gt;
          &lt;legend&gt;Your Personal Details&lt;/legend&gt;
          &lt;div class="form-group" style="display: none;"&gt;
            &lt;label class="control-label"&gt;Customer Group&lt;/label&gt;
            &lt;div class="radio"&gt;
              &lt;label&gt;
                &lt;input type="radio" name="customer_group_id" value="1" checked="checked"&gt;
                Default
              &lt;/label&gt;
            &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-firstname"&gt;First Name&lt;/label&gt;
            &lt;input type="text" name="firstname" value="" placeholder="First Name" id="input-payment-firstname" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-lastname"&gt;Last Name&lt;/label&gt;
            &lt;input type="text" name="lastname" value="" placeholder="Last Name" id="input-payment-lastname" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-email"&gt;E-Mail&lt;/label&gt;
            &lt;input type="text" name="email" value="" placeholder="E-Mail" id="input-payment-email" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-telephone"&gt;Telephone&lt;/label&gt;
            &lt;input type="text" name="telephone" value="" placeholder="Telephone" id="input-payment-telephone" class="form-control"&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
        &lt;fieldset id="address" class="required"&gt;
          &lt;legend&gt;Your Address&lt;/legend&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="control-label" for="input-payment-company"&gt;Company&lt;/label&gt;
            &lt;input type="text" name="company" value="" placeholder="Company" id="input-payment-company" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-address-1"&gt;Address 1&lt;/label&gt;
            &lt;input type="text" name="address_1" value="" placeholder="Address 1" id="input-payment-address-1" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group"&gt;
            &lt;label class="control-label" for="input-payment-address-2"&gt;Address 2&lt;/label&gt;
            &lt;input type="text" name="address_2" value="" placeholder="Address 2" id="input-payment-address-2" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-city"&gt;City&lt;/label&gt;
            &lt;input type="text" name="city" value="" placeholder="City" id="input-payment-city" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-postcode"&gt;Post Code&lt;/label&gt;
            &lt;input type="text" name="postcode" value="" placeholder="Post Code" id="input-payment-postcode" class="form-control"&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-country"&gt;Country&lt;/label&gt;
            &lt;select name="country_id" value="" id="input-payment-country" class="form-control"&gt;
              &lt;option value="244"&gt;Aaland Islands&lt;/option&gt;&lt;option value="1"&gt;Afghanistan&lt;/option&gt;
            &lt;/select&gt;
          &lt;/div&gt;
          &lt;div class="form-group required"&gt;
            &lt;label class="control-label" for="input-payment-zone"&gt;Region / State&lt;/label&gt;
            &lt;select name="zone_id" value="" id="input-payment-zone" class="form-control"&gt;
            &lt;/select&gt;
          &lt;/div&gt;
        &lt;/fieldset&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="buttons"&gt;
      &lt;div class="pull-right"&gt;
        &lt;button id="button-guest" class="btn btn-primary create-guest-user get-shipping-methods" data-loading-text="Loading..."&gt;Continue&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
  &lt;/form&gt;
  </code></pre>