如何防止用户第二次点击表单提交与ajax提交并显示进度答案

【问题标题】：How to prevent user second click on form submit with ajax submit and show progress如何防止用户第二次点击表单提交与ajax提交并显示进度
【发布时间】：2011-08-11 12:05:43
【问题描述】：

我在 ASP.NET MVC 3 中有一个登录表单

点击提交后，提交表单需要一些时间，因为发生了很多事情。结果，用户可能会再次单击该按钮，以为可能发生了错误和非常糟糕的事情。

所以我只是可以启用/禁用按钮，这可能是防止第二次点击的最简单方法，但我宁愿将表单发布更改为 ajax 方式。

Si 我想做什么：在用户单击提交后，我想显示弹出窗口/div，说明正在处理请求并在那里显示某种 ajax 梯形图，在处理表单后，我希望用户按照操作进行操作使用服务器控制器逻辑（客户端不知道用户将被重定向到哪里。）

有可能吗？你有什么意见？我怎样才能做得更好？

目前我正在寻找jQuery Form plugin 可能会有所帮助，但如果您能提出建议，那就太好了。

也刚刚找到了这个解决方案ajax - Prevent double click on submit，但我想我仍然希望显示带有进度的弹出窗口。

【问题讨论】：

标签： asp.net-mvc-3 jquery post

【解决方案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() 执行删除禁用后再次隐藏它

【讨论】：

弹出进度怎么样？
还有一件事我刚刚想到，如果服务器出现任何验证错误，我需要关闭此弹出窗口并显示它们，这样做容易吗？
是的，您只需在错误方法中输入相同的.hide()。我已经提到过；）