表格不提交AJAX

本文介绍了表格不提交AJAX的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

=====再次更新====（如果有人关心！）我之前发布的解决方案，无论出于何种原因停止工作。我在我的ajax请求中包含了一个beforeSend，并粘贴了我的js中验证我的表单的部分。现在就像魅力一样！

=====UPDATE AGAIN==== (if anyone cares!) the solution I posted before stopped working for whatever reason. I included a beforeSend in my ajax request and pasted the portion of my js that validates my form into it. Works like a charm now!

$('#form').on('submit', function(e) { e.preventDefault(); //prevents page refresh $.ajax({ type: "post", beforeSend: function(){ // check that form is complete }, url: "client_config_send2.php", data: $(this).serialize(), success: function(data){ alert('Thank you'); hide_request();window.location = "#top"; } }); });

编辑

请参阅下面的答案，使用2 .preventDefault！

See my answer below, using 2 .preventDefault!

我已阅读了很多页面/示例，但由于某种原因，我无法让它工作在我的形式。 我只是尝试提交表单而不刷新页面或打开确认消息的新页面/选项卡。 表格：

I have read through many pages / examples of this, but for some reason I can't get it to work on "my" form. I'm simply trying to submit my form without refreshing the page or opening a new page / tab for the confirmation message. The form:

<form id="form" name="Configurator" method="post" action=""> .... //Client configures his product, display an image if they choose, and request a quote. <button id="submit_button" type="submit" name="Submit" >Request</button> </form>

client_config_send2.php有效，只需从表单中提取一堆参数（配置，联系信息） ）并将其放入电子邮件中。这部分在我尝试集成ajax之前工作正常。

The client_config_send2.php works, it simply pulls a bunch of parameters from the form (configuration, contact info) and puts it into an email. This part works fine before I try to integrate the ajax.

JS：

$('form').on('submit', function(e) { e.preventDefault(); if(!validateForm(this)){ return true; } $.ajax({ type: "post", url: "client_config_send2.php", data: $(this).serialize(), done: function(data){ alert("Thank you, we will get back to you shortly"); } }); }) </script>

validateForm（）函数也可以工作，检查配置是否有效，如果是电子邮件/联系人信息已完成，等等。此时，validateForm正常工作：如果缺少信息，则会弹出警报。但是当validateForm（）返回true时，表单不提交，没有任何反应。

The validateForm() function also works, it checks if the configuration is valid, if the email / contact info is complete, etc. At this point, the validateForm works: if info is missing, the alert pops up. However when validateForm() returns true, the form doesn't submit, nothing happens.

我尝试成功而不是完成，在JS中返回false而不是true，以及我在网上找到的很多其他东西，但我迷失了。从来没有使用过AJAX，所以我对这种语言的微妙之处没有100％的自信！

I have tried success instead of done, return false instead of true in the JS, and many other things I found online but I am lost. Never used AJAX before so I'm not 100% confident with the subtleties of the language!

提前致谢！

推荐答案

这是最终的代码，它完全符合我的要求： - validateForm（）函数可以正常工作。如果表单未完成，则返回false，弹出警报，表单不提交 - 如果validateForm（）返回true，表单将被提交，弹出确认警报，页面不刷新。然后，用户可以构建新配置并提交新请求，而无需重新输入所有联系信息。

Here is the final code that does exactly what I want: - the validateForm() function works as it should. If the form is not complete, it returns false, an alert pops up and the form does not submit - if validateForm() returns true, the form gets submitted, the confirmation alert pops up and the page does NOT refresh. Users can then build a new configuration and submit a new request without re-entering all the contact info.

2 .preventDefault就行了！

The 2 .preventDefault did the trick!

$('form').on('submit', function(e) { e.preventDefault(); //prevents page refresh when form is submitted //If form could not be validated var x = validateForm(); if(x == false){ //prevent the form form submitting e.preventDefault(); } //else else { //form input is valid //make the ajax call $.ajax({ type: "post", url: "client_config_send2.php", data: $(this).serialize(), success: function(data){ alert('Thank you! we will get back to you within 24 hours. Please check your junk / spam folder if you do not receive a response within that time.'); } }); } });

谢谢大家的帮助！