表单不提交与AJAX

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，因此我对语言的微妙之处并不是100％自信！

在此先感谢！

Answer 1

“client_config_send2.php”是一个文件名。您提供给Ajax的URL需要是像http://example.com/client_config_send2.php这样的URL。

Answer 2

变化做了成功：

success: function(data){ 

成功只闪光后您的请求得到了响应，响应代码是OK（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.'); 
     } 
     }); 
    } 
}); 

谢谢大家的帮助！