使用onsubmit同时表单提交和Ajax?

时间:2013-10-02 03:17:55

标签: javascript php jquery ajax forms

我很抱歉,如果之前已经询问过,但是我需要发送表单数据,同时提交表单提交和ajax调用,点击提交时会触发。原因是因为用户被重定向,我想事先将det formdata存储到我的数据库中。

所以我尝试使用表单onsubmit和fire提交formdata的javascript函数。 这不起作用,表单被发送并且没有进行ajax调用。所以我尝试从函数中取出ajax调用,然后查看它是否正常工作,在页面刷新时,进行了ajax调用并更新了我的数据库。

以下是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调用完成后,完成后,像往常一样发送表单。

如果我使用return false,它会起作用。我希望有人可以解释我明显做错的事情,并告诉我这样做的方法。您在此代码中看到的警报仅用于调试。

1 个答案:

答案 0 :(得分:2)

等到ajax完成然后提交表单。

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