使用onsubmit同时提交表单和Ajax? [英] Form submit and Ajax at the same time using onsubmit?

问题描述

很抱歉，如果以前已经问过这个问题，但是我需要同时发送带有表单提交和单击提交时触发的ajax调用的表单数据.原因是因为用户被重定向了，我想将det formdata预先存储到我的数据库中.

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.

因此，我尝试使用表单的onsubmit和提交表单数据的javascript函数触发. 这不起作用，将发送表单并且不进行ajax调用.因此，我尝试将ajax调用从该函数中删除，然后看看它是否正常工作，并且确实如此，在页面刷新上进行了ajax调用并更新了我的数据库.

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.

以下是som代码:

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

我不知道为什么这不起作用，我想要的是页面等待直到进行ajax调用，完成后，照常发送表单.

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.

如果我使用return false，它将起作用.我希望有人可以解释我显然做错了什么，并告诉我这样做的方法.您在此代码中看到的警报仅用于调试.

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.

推荐答案

等待直到ajax完成，然后提交表单.

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

这篇关于使用onsubmit同时提交表单和Ajax?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！