表單不提交與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.'); 
     } 
     }); 
    } 
}); 

謝謝大家的幫助！