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.

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.

• javascript
• php
• jquery
• ajax
• forms

• “The reason why is because the user get's redirected and i want to store det formdata to my database beforehand.” – then why don’t you just redirect the user server-side after processing the form data? Submitting the from and an AJAX request “at the same time” will most likely not work, because submitting the form will normally cancel still running AJAX requests. So you would have to wait for the AJAX request to finish before submitting the form. – C3roe Commented Oct 2, 2013 at 6:17
• This was what i had in mind when writing it, not doing it at the exact same time, but before the redirect. I scratched the code i was working on and wrote it again with tha javaScript Musa provided, it works as intended now so. Thanks for the input – Dan-Levi Tømta Commented Oct 2, 2013 at 7:17

1 Answer 1

Wait until the ajax pletes 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,
          plete: function(){
              jQuery("#danlevi").submit(); //submit the form after ajax pletes
          }
        });
        return false; //stop the form from initially submitting
      }
    });