如何在用戶單擊表單提交後顯示加載消息？

我在我的ASP.NET MVC應用程序中的HTML登錄表單，看起來像這樣：如何在用戶單擊表單提交後顯示加載消息？

<form action="/Account/Login" class="form" method="post"> 
    <input name="UserName" size="25" type="text" value=""> 
    <input name="Password" size="25" type="password"> 
    <button type="submit" class="glossy">Login</button> 
</form> 

<div class="loading-mask" id="authenticating"> 
    <span>Authenticating ...</span> 
</div>

當用戶點擊提交存在/帳號/登錄動作處理之前的延遲，並返回之前部分表單顯示錯誤或在將用戶帶到新頁面之前。

是否有一種方法可以使窗體第一次出現時隱藏加載區，然後在單擊「提交」按鈕後變爲可見。請注意，我不需要再次隱藏它，因爲提交之後的任何操作都會導致頁面重新加載。

注意我正在尋找一些不使用jQuery的方式。

來源

2013-10-19 Samantha J T Star

你使用jQuery或只是普通的JavaScript？ –

對不起，我的回覆很慢。沒有我的網頁不使用jQuery？我會更新這個問題來提一提。 –

你有沒有嘗試過？你學過JavaScript嗎？我們不會只爲你寫...... – Sir

首先將display屬性設置爲none。

#authenticating { 
    display:none; 
}

然後在窗體的代碼

onsubmit="document.getElementById('authenticating').style.display = 'block'"

編輯作爲Dave建議，最好是使用事件偵聽器。

document.getElementsByClassName('form').addEventListener("submit", function(){ 
    document.getElementById("authenticating").style.display = "block"; 
}), false);

來源

2013-10-19 15:06:32

然而，理想情況下，使用事件偵聽器進行內聯。 – Sir

謝謝我會試試這個。 –

如何在用戶單擊表單提交後顯示加載消息？

回答

相關問題