如何防止用戶第二次點擊表單提交 ajax 提交並顯示進度

Question

我在 ASP.NET MVC 3 中有一個登錄表格

單擊提交后，提交表單需要一些時間，因為發生了很多事情。 結果，用戶可能會再次單擊該按鈕，以為可能發生了錯誤和非常糟糕的事情。

所以我只是可以啟用/禁用按鈕，這可能是防止第二次點擊的最簡單方法，但我寧願將表單帖子更改為 ajax 方式。

我想做什么：在用戶單擊提交后，我想顯示彈出窗口/div，說正在處理請求並在那里顯示某種 ajax 梯形圖，在處理表單后，我希望用戶按照服務器 controller 執行操作邏輯（客戶端不知道用戶將被重定向到哪里。）

有可能嗎？ 你有什么意見？ 我怎樣才能做得更好？

目前我正在尋找jQuery 表單插件可能會有所幫助，但如果您可以提出一些建議，那就太好了。

也剛剛找到了這個解決方案ajax - 防止雙擊提交，但我想我仍然希望顯示帶有進度的彈出窗口。

Answer 1

我遇到了同樣的問題，過去我使用.attr("disabled","disabled")在第一次單擊時禁用按鈕，然后不會觸發第二次單擊。 在 JQuery ajax 響應的成功（或錯誤）方法中，使用.removeAttr("disabled")

編輯：

要添加彈出窗口，您通常只需顯示一個<div>並在處理完成時將其隱藏。

所以默認情況下你 div CSS 是

#myPopUp{
display: none;
top: 50px;
left: 50px;
width: 250px;
height: 100px;
background-color:darkblue;
background-color:white;     
}

HTML

<div id="myPopUp">This is a popup</div>`

現在，當您將禁用添加到按鈕時，您還可以使用$("#myPopUp").show()顯示彈出窗口，並在您對按鈕$("#myPopUp").hide()執行刪除禁用后再次隱藏它$("#myPopUp").hide()