如何在表單加載時顯示加載器？

-1

我有一個PHP頁面。提交表格和獲得回覆的等待時間每次都是不同的。這取決於我提交的號碼數據。如何在表單加載時顯示加載器？

我如何可以顯示程序的時候，這種形式提交，並阻止它完成後？

P.S：我發現了一些不錯的CSS裝載機：https://projects.lukehaas.me/css-loaders。

來源

2017-04-17 nistelrooy41001662

的？ –

你在使用ajax嗎？ – Alex

不，我不使用ajax – nistelrooy41001662

(function($){ 
    $(function(){ 
     $('#form').submit(function(event){ 
      event.preventDefault(); 
      var loading_image = $('#form_loading_img'), 
      data = $(this).serialize(), 
      form = $(this); 
      loading_image.show(); 
      $.ajax({ 
       url: form.attr('action'), 
       type: form.attr('method'), 
       data: data, 
       success:function(){ 
        window.location.reload(); 
       }, 
       error:function(){ 
        alert('Something goes wrong. Please check the form and try again.'); 
       }, 
       complete:function(){ 
        loading_image.hide(); 
       } 
      }); 
     }); 
    }); 
})(jQuery); 
<img src="http://www.mytreedb.com/uploads/mytreedb/loader/ajax_loader_gray_512.gif" id="form_loading_img" style="display:none"> 
<form action="action.php" id="form" method="post"> 
    <!--- Your form element ----> 
</form>

來源

2017-04-17 10:06:16 Niladri

謝謝您的回答。 – nistelrooy41001662

其Ajax調用我想你需要非阿賈克斯 – Alex

這是不可能的顯示形式上傳僅PHP在一個圖像或消息。在阿賈克斯最好的和簡單的解決方案。JQuery的Ajax很簡單，然後是JavaScript。如果我錯了，請給我一個另一種方法，它會對我有幫助。 – Niladri

如果你正在使用AJAX，那麼你可以開始展示GIF上按一下按鈕，然後在阿賈克斯的做好的情況下調用，您可以刪除裝載儀GIF

最初使用這個

並在點擊提交使用

$("#btnSubmit").click(function(){ 
    $("#showGif").attr("style",""); 

})

，並在你的Ajax調用使用的成功功能

$("#showGif").attr("style","display:none");

但是，如果你正在使用完整的帖子，然後你的Gif不會是extire請求和響應顯示。

如果仍然需要它，你需要表現出對如上圖所示提交按鈕的點擊事件。但最初你需要的是您使用的數據提交阿賈克斯（），以顯示屬性保持到沒有包含GIF div

來源

2017-04-17 09:53:39 Alex

謝謝你的回答 – nistelrooy41001662

那怎麼樣？ – Alex

uhh..don't使用'.attr（ '風格' ...' - 只需使用'.hide（）'和'.show（）'，而不是它的更短，更清晰，你不清理掉任何。內嵌樣式，可能在那裏。 – jbyrd

如何在表單加載時顯示加載器？

回答

相關問題