jQuery AJAX submission with form values

Question

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.

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.

I assumed that just including this into the call was going to be enough:

$formData = $('#checkout-cart').serialize();
data: $formData,

Can anyone point me in the right direction please?

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();
});

HTML

<form id="checkout-form" action="cart/checkout/" method="post">
  <div class="row">
    <div class="col-sm-6">
      <fieldset id="account">
        <legend>Your Personal Details</legend>
        <div class="form-group" style="display: none;">
          <label class="control-label">Customer Group</label>
          <div class="radio">
            <label>
              <input type="radio" name="customer_group_id" value="1" checked="checked">
              Default
            </label>
          </div>
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-firstname">First Name</label>
          <input type="text" name="firstname" value="" placeholder="First Name" id="input-payment-firstname" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-lastname">Last Name</label>
          <input type="text" name="lastname" value="" placeholder="Last Name" id="input-payment-lastname" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-email">E-Mail</label>
          <input type="text" name="email" value="" placeholder="E-Mail" id="input-payment-email" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-telephone">Telephone</label>
          <input type="text" name="telephone" value="" placeholder="Telephone" id="input-payment-telephone" class="form-control">
        </div>
      </fieldset>
    </div>
    <div class="col-sm-6">
      <fieldset id="address" class="required">
        <legend>Your Address</legend>
        <div class="form-group">
          <label class="control-label" for="input-payment-company">Company</label>
          <input type="text" name="company" value="" placeholder="Company" id="input-payment-company" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-address-1">Address 1</label>
          <input type="text" name="address_1" value="" placeholder="Address 1" id="input-payment-address-1" class="form-control">
        </div>
        <div class="form-group">
          <label class="control-label" for="input-payment-address-2">Address 2</label>
          <input type="text" name="address_2" value="" placeholder="Address 2" id="input-payment-address-2" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-city">City</label>
          <input type="text" name="city" value="" placeholder="City" id="input-payment-city" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-postcode">Post Code</label>
          <input type="text" name="postcode" value="" placeholder="Post Code" id="input-payment-postcode" class="form-control">
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-country">Country</label>
          <select name="country_id" value="" id="input-payment-country" class="form-control">
            <option value="244">Aaland Islands</option><option value="1">Afghanistan</option>
          </select>
        </div>
        <div class="form-group required">
          <label class="control-label" for="input-payment-zone">Region / State</label>
          <select name="zone_id" value="" id="input-payment-zone" class="form-control">
          </select>
        </div>
      </fieldset>
    </div>
  </div>

  <div class="buttons">
    <div class="pull-right">
      <button id="button-guest" class="btn btn-primary create-guest-user get-shipping-methods" data-loading-text="Loading...">Continue</button>
    </div>
  </div>

</form>

type: 'ajax' is not valid. It should be type: "get" or type: "post". — Barmar
– Barmar, Commented Aug 27, 2018 at 21:50
And you only need that option when you use $.ajax. $.post automatically sets it to post. — Barmar
– Barmar, Commented Aug 27, 2018 at 21:52

null · Accepted Answer · 2018-08-27 21:59:29Z

2

Please add url attribute to your $.post

  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) {
          $.ajax({
              type: 'post',
              data: $formData,
              url: 'url.php'
          }).done(function (response) {
              $('.create-guest-user').addClass('disabled');
          });
      }
  };

  $(document).ready(function () {
      formSubmit.initialize();
  });

edited Aug 27, 2018 at 21:59

answered Aug 27, 2018 at 20:48

null

1,1723 gold badges13 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

alienbuild Over a year ago

Thanks for the reply - no luck with that though I'm afraid.

null Over a year ago

Does the request goes to server?

alienbuild Over a year ago

The call goes to the server fine and fires off my PHP action scripts however I can't get hold of any $_POST values. I can also see when logging $formData to the browser console that it's being captured fine.

null Over a year ago

Can you also post your html form code in your question?

Barmar Over a year ago

The first argument to $.post is the URL, you don't need to repeat it in the options argument.

|

Barmar · Accepted Answer · 2018-08-28 16:12:47Z

2

The second argument to $.post is just the post data, not an options argument. If you want to pass options, you need to use $.ajax, not $.post.

You also need to update $formData when making the AJAX call, otherwise you'll get the values of the form from when the page was initially loaded.

There's no action option to $.ajax. If you want to add additional POST parameters that aren't in form inputs, you need to add them to $formData.

createGuestUser: function (elem) {
    var $formData = 'action=createGuestUser&' + $('#checkout-cart').serialize();
    $.ajax({
        type: 'post',
        data: $formData,
        url: window.location.href,
    }).done(function (response) {
        $('.create-guest-user').addClass('disabled');
    });
}

edited Aug 28, 2018 at 16:12

answered Aug 27, 2018 at 21:56

Barmar

789k57 gold badges555 silver badges669 bronze badges

9 Comments

alienbuild Over a year ago

Thanks for the reply.The action is being posted and captured by PHP in a switch statement.

Barmar Over a year ago

You mean something like $_POST['action']?

Barmar Over a year ago

I've updated the answer to show how to send an additional parameter in the POST data.

alienbuild Over a year ago

Thanks reply the reply. Not quite I meant that I was using it in this way.. passing the action into the switch case statement for different elements of the checkout page that gets submitted. Here's the trimmed version. pastebin.com/z5aP6YHC

Barmar Over a year ago

Your code there has $action = $post['action']; which is essentially what I said.

|

Collectives™ on Stack Overflow

jQuery AJAX submission with form values

2 Answers 2

6 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related