Question

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

$('#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！

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

<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之前，这部分工作正常。

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时，表单不提交，没有任何反应。

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

提前致谢！

Answer 1

＆＃34; client_config_send2.php＆＃34;是一个文件名。您为Ajax提供的URL需要是http://example.com/client_config_send2.php之类的URL。

Answer 2

改变成功：

success:  function(data){

成功仅在您的请求得到响应并且响应代码正常（http 200）后才会触发。

Answer 3

更新以下代码：

$('form').on('submit', function(e) {
e.preventDefault();     
if(!validateForm(this)){
return true;
}
var formdata = $(this).serialize();

$.ajax({
        type: "post",
        url: "http://www.example.com/client_config_send2.php",
        data: formdata,
        success:  function(data){
            alert("Thank you, we will get back to you shortly");
}
        });

})  


</script>

Answer 4

您可以尝试删除/评论event.preventDefault（）;

如果调用此方法，则不会触发事件的默认操作。（http://api.jquery.com/event.preventdefault/）

Answer 5

尝试使用以下格式进行编码。该逻辑使用if / else语句进行ajax调用。

$('form').on('submit', function(e) {
    //If form could not be validated
    if(!validateForm(this)){
       //prevent the form form submitting
        alert("Your form is not valid for submission!");
        e.preventDefault();  
    }
    //else 
    else{
        //form input is valid
        //make the ajax call
        $.ajax({
            type: "post",
            url: "client_config_send2.php",
            data: $(this).serialize(),
            done:  function(data){
                alert("Thank you, we will get back to you shortly");
            }
           });
       }
    });
 });

Answer 6

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

2 .preventDefault成功了！

$('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

6 个答案: