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

时间:2011-08-11 12:05:43

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

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

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

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

我正在考虑做什么:在用户点击提交之后我想显示popup / div说正在处理的请求并在那里显示某种ajax lader并且在处理表单之后我希望用户按照Action操作使用服务器控制器逻辑(客户端不知道用户将被重定向到哪里。)

有可能吗?你有什么看法?我怎样才能更好地做到这一点?

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

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

1 个答案:

答案 0 :(得分:0)

我遇到了同样的问题,过去我使用.attr("disabled","disabled")在第一次点击时禁用按钮,然后第二次点击不会被触发。在JQuery ajax响应的成功(或错误)方法中使用.removeAttr("disabled")

编辑:

要添加弹出窗口,通常只需显示<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()

上禁用删除后再次隐藏它