jquery提交表單無需重新加載頁面

我對Jquery不是很熟悉。我正在嘗試製作一個在後臺提交的表單，無需重新加載頁面。我有一個隱藏的div，它顯示並隱藏點擊，裏面有一個窗體。jquery提交表單無需重新加載頁面

我有兩個問題：

1）當表單驗證失敗時，形式仍提交。我試圖將驗證和提交代碼置於條件if(validation == valid) { $.ajax.... }中，但它無法正常工作。

2）表單提交後div自動隱藏，所以無法看到成功的消息。

下面的代碼：

$().ready(function() { 

    // validate the form when it is submitted, using validation plugin. 
    var validator = $("#contactform").validate({ 
     errorContainer: container, 
     errorLabelContainer: $(), 
    onkeyup: false, 
    onclick: false, 
    onfocusout: false, 
    errorPlacement: function (error, element) { 
error.insertBefore(element);  
} 
    }); 
}); 

$(function() { 

    //this submits a form 
$('input[type=submit]').click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "contact.php", 
      data: $("#contactform").serialize(), 
      beforeSend: function() { 
       $('#result').html('<img src="loading.gif" />'); 
      }, 
      success: function(data) { 
       $('#result').html(data); 
      } 

     }) 
    }) 
}) 


//this shows and hides div onlcick 
$(document).ready(function(){ 
     $(".slidingDiv").hide(); 
     $(".show_hide").show(); 
    $('.show_hide').click(function(){ 
    $(".slidingDiv").slideToggle(); 
    }); 
});

來源

2013-10-07 qwaz

而不是綁定到你應該綁定到submit事件的形式click事件（input[type=submit]）。

$("form").on("submit", function (e) { 
    e.preventDefault();

我也不確定驗證。如果它異步運行，則需要回調。如果它同步運行，什麼時候觸發？現在看來似乎應該在提交表單時，除非您驗證插件確實是對自己來完成：

$("form").on("submit", function (e) { 
    e.preventDefault(); 
    if ($(this).validate(options)) { 
     $.ajax

使用e.preventDefault將防止重載，並應該讓你的成功div來顯示。

來源

2013-10-07 19:48:22

謝謝，e.preventDefault做了提交和成功div的訣竅。 – qwaz

我想防止提交表單後刷新..此代碼無法正常工作 –

這對我本地工作。但是當我上傳到我的託管服務器時，.on（「submit」，..）調用拋出了一個未定義的錯誤..不知道爲什麼，因爲我認爲我的代碼部署在任何地方都有相同版本的jQuery？我找到了一個替代方法來更新這行：$（「form」）。submit（function（e）{..}）; ..然後工作正常 – gnB

1）使用event.preventDefault（）;保持表單不被提交 - http://api.jquery.com/event.preventDefault/

2）在給定腳本中沒有任何內容應該因爲#result隱藏...但是您可以嘗試$（'＃result'）。show（）和看看是否能夠把它帶回

來源

2013-10-07 19:45:46

Seth，它不是#result隱藏它是一個$（「。slidingDiv」） – qwaz

好吧然後切換回.sliddingDiv –

請檢查您使用的是哪個jQuery版本，因爲在jquery 1.8.2之後，來自jquery ajax的「成功」函數已被棄用。

使用e.preventDefault（）來防止實際的提交事件。

來源

2013-10-07 19:50:20

jquery提交表單無需重新加載頁面

回答

相關問題