javascript 使用onsubmit同时提交表单和Ajax？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19129463/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Form submit and Ajax at the same time using onsubmit?
提问by Dan-Levi T?mta
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.
如果之前有人问过这个问题，我很抱歉，但我需要将我的表单数据与表单提交和点击提交时触发的 ajax 调用一起发送。原因是因为用户被重定向，我想事先将 det formdata 存储到我的数据库中。
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.
所以我尝试使用提交表单数据的javascript函数的onsubmit和fire表单。这不起作用，表单已发送且未进行 ajax 调用。所以我尝试从函数中取出 ajax 调用，然后看看它是否有效，它确实有效，在页面刷新时进行了 ajax 调用并更新了我的数据库。
Here are som code:
下面是一些代码：
HTML
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.
我不知道为什么这不起作用，我想要的是页面等待 ajax 调用完成，完成后，像往常一样发送表单。
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.
如果我使用 return false，它会起作用。我希望有人能解释我明显做错了什么，并告诉我这样做的方法。您在此代码中看到的警报仅用于调试。
采纳答案by Musa
Wait until the ajax completes then submit the form.
等到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
}
});
