2016-11-09 79 views
0

當使用button這個工程執行腳本:從(直到頁面加載裝載機顯示器)提交

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $('button').click(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

但是,如果使用Submit它不:

我嘗試以下操作工作:

<script> 
    $(document).ready(function(){ 
     $(".loader").hide(); 
     $(".overlay").fadeOut(1000); 

     $("form").submit(function() { 
      $(".loader").fadeIn("fast"); 
      $(".overlay").fadeIn(100); 
     }); 
    }); 
</script> 

我自己也嘗試沒有喜悅:

$(input[type="submit"]).click(function() { 

我希望它適用於頁面上的所有提交,因此不想使用ID。任何指針都是最受歡迎的。

UPDATE

$("form").submit(function(e) { 

的伎倆。

+0

不會提交表單無論如何刷新頁面,使淡入淡出效果不相關?在這種情況下定義「不起作用」。 – David

+0

提交實際上重新加載頁面,這是有效地刷新它,你是對的。我想要的是加載器顯示按下提交時,然後當頁面重新加載隱藏的加載器。正如我所說,如果我使用而不是 RGriffiths

+0

,但它可以完美運行但是如果頁面幾乎立即被重新加載,那麼是不是裝載程序仍在執行其工作?看起來這個「工作」很好。你沒有看到加載程序的唯一原因是因爲實際操作比加載程序發生得更快。這真的是一件壞事嗎?你問在重新加載頁面之前如何人爲地引入延遲? – David

回答

3

您必須阻止表單的默認行爲,否則它會提交(並且瀏覽器將更改爲下一頁[表單中的動作])。

要禁用submit操作,您需要在submit/click函數中使用event.preventDefault()

如果您確實需要提交表單 - 你可以添加一個變量來檢查是否已經阻止submittion,並根據該以防止(或submit函數內提交表單):

var submitPrevented = false; 
$("form").submit(function(e) { 
    if (!submitPrevented) { 
     submitPrevented = true; 
     e.preventDefault() 
    } 
    $(".loader").fadeIn("fast"); 
    $(".overlay").fadeIn(100); 
    var that = this; 
    setTimeout(function() { 
     that.submit(); 
    }, 1000); 
}); 

請注意,我添加了e元素作爲該函數的參數。

關於你寫的最後一個代碼 - 那裏有一個語法錯誤。這是正確的語法:

$('input[type="submit"]').click(function() { 
+0

謝謝,但這阻止了表單發佈。正如我所說的,如果我使用

+0

@Rriffiths,請檢查更新 – Dekel

+0

謝謝。因爲我總是希望頁面表單發佈,所以實際上有必要。簡單地把函數(e)而不是函數()放在一邊就可以實現。我讚賞指針。 – RGriffiths