有时,当响应缓慢时,可能会多次单击提交按钮。
如何防止这种情况发生?
有时,当响应缓慢时,可能会多次单击提交按钮。
如何防止这种情况发生?
使用不显眼的 javascript 在表单提交后禁用提交事件。这是一个使用 jQuery 的示例。
编辑:修复了在不单击提交按钮的情况下提交表单的问题。谢谢,一番。
$("body").on("submit", "form", function() {
$(this).submit(function() {
return false;
});
return true;
});
我尝试了vanstee 的解决方案以及 asp mvc 3 unobtrusive 验证,如果客户端验证失败,代码仍在运行,并且表单提交被永久禁用。更正字段后,我无法重新提交。(见bjan的评论)
所以我像这样修改了 vanstee 的脚本:
$("form").submit(function () {
if ($(this).valid()) {
$(this).submit(function () {
return false;
});
return true;
}
else {
return false;
}
});
通过让 onsubmit 处理程序隐藏提交按钮并将其替换为加载动画,可以非常优雅地实现客户端表单提交控制。这样用户就可以在他的动作(点击)发生的同一地点获得即时的视觉反馈。同时,您可以防止再次提交该表单。
如果您通过 XHR 提交表单,请记住您还必须处理提交错误,例如超时。您将不得不再次显示提交按钮,因为用户需要重新提交表单。
另一方面,llimllib 提出了一个非常有效的观点。所有表单验证都必须在服务器端进行。这包括多次提交检查。永远不要相信客户!这不仅是禁用 javascript 的情况。您必须记住,所有客户端代码都可以修改。有点难以想象,但是与您的服务器通信的 html/javascript 不一定是您编写的 html/javascript。
正如 llimllib 建议的那样,生成带有该表单唯一标识符的表单,并将其放入隐藏的输入字段中。存储该标识符。接收表单数据时,只有在标识符匹配时才对其进行处理。(还将标识符链接到用户会话并进行匹配,以提高安全性。)在数据处理后删除标识符。
当然,偶尔,您需要清理从未提交过任何表单数据的标识符。但很可能您的网站已经采用了某种“垃圾收集”机制。
这是一个简单的方法:
<form onsubmit="return checkBeforeSubmit()">
some input:<input type="text">
<input type="submit" value="submit" />
</form>
<script type="text/javascript">
var wasSubmitted = false;
function checkBeforeSubmit(){
if(!wasSubmitted) {
wasSubmitted = true;
return wasSubmitted;
}
return false;
}
</script>
<form onsubmit="if(submitted) return false; submitted = true; return true">