提交表單，然後顯示加載圖像的javascript

我提交表單並加載加載gif在同一個div中通過替換加載圖像的HTML形式的html。提交表單，然後顯示加載圖像的javascript

我第一次提交表單然後加載gif，因爲我必須用加載圖像替換div（在哪個表單存在）的內容。

日誌1,2,3正在打印，正在顯示loading圖像，但表單未提交請幫忙。

<script> 
/* javascriptfunction */ 

Submit_and_loadimage() { 


console.log("1"); 

document.getElementById("form_in_div").submit(); 

or 

document.forms['form_name'].submit(); 


console.log("2"); 
document.getElementById("form_in_div").innerHTML ='LOADING_IMAGE-DIV'; 

console.log("3");

}

來源

2015-06-22 user3869979

我不想使用AJAX。 – user3869979

讓我們假設按鈕點擊您所呼叫的AJAX方法

<button onclick="LoadData();"/>

ajax call sh之前流圖像和阿賈克斯的onComplete方法隱藏這一形象

function LoadData(){ 
    $("#loading-image").show(); 
    $.ajax({ 
      url: yourURL, 
      cache: false, 
      success: function(html){ 
      $("Your div id").append(html); 
      }, 
      complete: function(){ 
      $("#loading-image").hide(); 
      } 
     }); 
}

來源

2015-06-22 03:55:17

thnx爲你的答覆...但我不能使用ajax，我只能使用JavaScript – user3869979

然後試試這個添加div並使其隱藏默認。〜

〜並在頁面加載顯示Java腳本該div方含裝載圖像〜〜 –

您將無法與普通的JavaScript來做到這一點很容易。發佈表單時，表單輸入會發送到服務器，並刷新頁面 - 數據在服務器端進行處理。也就是說，submit（）函數實際上不會返回任何內容，它只是將表單數據發送到服務器。

如果你真的想顯示這種工作圖像的Javascript（沒有頁面刷新），那麼你需要使用AJAX，並且當你開始談論使用AJAX時，你需要使用一個庫。 jQuery是迄今爲止最受歡迎的，也是我個人最喜歡的。有一個名爲Form的jQuery插件，它可以完成聽起來像你想要的。

這裏是你如何使用jQuery和插件：

上顯示您的表單圖像提交

$('#myForm') 
    .ajaxForm({ 
     url : 'myscript.php', // or whatever 
     dataType : 'json', 
     success : function (response) { 
      // hide your image 
     } 
    }) 
;

來源

2015-06-22 03:37:53

好的...通過這個邏輯我的表單應該提交，但加載圖像不應該是可見的。但它是相反的，爲什麼？ – user3869979

，我只是想在前一頁顯示加載圖像，直到下一頁（加入一些處理1-2分鐘後）加載。 – user3869979

@ user3869979在表單提交時顯示圖像，並且您的隱藏圖像代碼將成功部分 –

你可以使用AJAX，這樣頁面不會重定向提交表單。把你加載「.gif注意」形象某處隱藏塊

設置的這個顯示div來inline-block的，當你點擊提交按鈕。然後打個阿賈克斯電話。並且當你從服務器獲得響應時再次隱藏這個div。

使用jQuery，你可以不喜歡它

jQuery('#submitbtn').click(function(){ 
    jQuery('.loading').show(); 
    jQuery.post("test.php", { name: "John", time: "2pm" }) 
     .done(function(data) { 
     alert("Data Loaded: " + data); 
     jQuery('.loading').hide(); 
    }); 
});

來源

2015-06-22 04:01:02 GaurabDahal

thnx for ur reply ...但我不能使用ajax，我只能使用JavaScript – user3869979

然後嘗試一下添加DIV，並使其通過默認隱藏。

<div id="loading"> 
    <img id="loading-image" src="images/ajax-loader.gif" alt="Loading..." />  </div>

並在頁面加載顯示的Java腳本，DIV方含裝載圖像

<script language="javascript" type="text/javascript"> 
    $(window).load(function() { 
    $('#loading').hide(); 
    }); 
</script>~

來源

2015-06-22 04:57:29

提交表單，然後顯示加載圖像的javascript

回答

相關問題