Javascript – Form submit and Ajax at the same time using onsubmit

ajaxformsjavascriptjqueryPHP

i am sorry if this have been asked before, but i need to send my form data with both the form submit and a ajax call that fires off when clicking submit. The reason why is because the user get's redirected and i want to store det formdata to my database beforehand.

So i try to use the form onsubmit and fire of a javascript function that submits the formdata.
This does not work, the form is sent and no ajax call is made. So i try to take the ajax call out of the function and see if it works then and it does, on page refresh the ajax call is made and my database updated.

Here are som code:

HTML

<form id="danlevi" onsubmit="return senddata()" action='<?php echo esc_url( get_option( 'shopping_cart_url' ) ); ?>' method='post' enctype="multipart/form-data">
  <input type="text" name="first" />
  <input type="text" name="last" />
  <input type="text" name="e-mail" />
  <input type="text" name="phone" />
  <input type="text" name="street" />
  <input type="text" name="zip" />
  <input type="submit" value="send" />
</form>

javaScript

jQuery(document).ready(function() {
  function senddata() {
    var formdata = jQuery("#danlevi").serialize();
    var decoded = decodeURIComponent(formdata);
    strip = decoded.replace(/[\[\]]/g, "_");
    alert(strip);
    jQuery.ajax({
      type: "POST",
      url: 'dev/wp-content/themes/twentythirteen/custom/process_address.php',
      data: strip,
    });
  }
});

I have no idea why this is not working, what i want is for the page to wait until the ajax call is made, when done, send the form as usual.

If i use return false, it works. I hope that someone can explain what i obviously do wrong, and show me the way of doing this. The alert you see in this code is just for debugging.

Best Answer

Wait until the ajax completes then submit the form.

   jQuery(document).ready(function() {
      function senddata() {
        var formdata = jQuery("#danlevi").serialize();
        var decoded = decodeURIComponent(formdata);
        strip = decoded.replace(/[\[\]]/g, "_");
        alert(strip);
        jQuery.ajax({
          type: "GET",
          url: 'dev/wp-content/themes/twentythirteen/custom/process_address.php',
          data: strip,
          complete: function(){
              jQuery("#danlevi").submit(); //submit the form after ajax completes
          }
        });
        return false; //stop the form from initially submitting
      }
    });

Dynamically create `<input>`s in a form and submit it

/**
 * sends a request to the specified url from a form. this will change the window location.
 * @param {string} path the path to send the post request to
 * @param {object} params the parameters to add to the url
 * @param {string} [method=post] the method to use on the form
 */

function post(path, params, method='post') {

  // The rest of this code assumes you are not using a library.
  // It can be made less verbose if you use one.
  const form = document.createElement('form');
  form.method = method;
  form.action = path;

  for (const key in params) {
    if (params.hasOwnProperty(key)) {
      const hiddenField = document.createElement('input');
      hiddenField.type = 'hidden';
      hiddenField.name = key;
      hiddenField.value = params[key];

      form.appendChild(hiddenField);
    }
  }

  document.body.appendChild(form);
  form.submit();
}

Example:

post('/contact/', {name: 'Johnny Bravo'});

EDIT: Since this has gotten upvoted so much, I'm guessing people will be copy-pasting this a lot. So I added the hasOwnProperty check to fix any inadvertent bugs.

Javascript – Abort Ajax requests using jQuery

Most of the jQuery Ajax methods return an XMLHttpRequest (or the equivalent) object, so you can just use abort().

See the documentation:

abort Method (MSDN). Cancels the current HTTP request.
abort() (MDN). If the request has been sent already, this method will abort the request.

var xhr = $.ajax({
    type: "POST",
    url: "some.php",
    data: "name=John&location=Boston",
    success: function(msg){
       alert( "Data Saved: " + msg );
    }
});

//kill the request
xhr.abort()

UPDATE: As of jQuery 1.5 the returned object is a wrapper for the native XMLHttpRequest object called jqXHR. This object appears to expose all of the native properties and methods so the above example still works. See The jqXHR Object (jQuery API documentation).

UPDATE 2: As of jQuery 3, the ajax method now returns a promise with extra methods (like abort), so the above code still works, though the object being returned is not an xhr any more. See the 3.0 blog here.

UPDATE 3: xhr.abort() still works on jQuery 3.x. Don't assume the update 2 is correct. More info on jQuery Github repository.

Best Answer

Related Solutions

JavaScript post request like a form submit

Dynamically create <input>s in a form and submit it

Javascript – Abort Ajax requests using jQuery

Related Topic

Dynamically create `<input>`s in a form and submit it