表格不提交AJAX [英] Form not submitting with 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.');
        }
       });
   }
});

谢谢大家的帮助！

这篇关于表格不提交AJAX的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！