(客户端)禁用提交按钮的最佳方法是什么?
细节:
- 仅在用户单击提交按钮后但在回发到服务器之前禁用
- ASP.NET Webforms(.NET 1.1)
- 首选jQuery(如果有任何库)
- 如果表单重新加载(即信用卡失败)必须启用
这不是我必须这样做的必要条件,但如果有一个简单的方法可以做到这一点而不必改变太多,我会这样做。 (即如果没有简单的解决方案,我可能不会这样做,所以不要担心挖得太深)
对于所有提交按钮,通过JQuery,它将是:
$('input[type=submit]').click(function() { this.disabled = true; });
或者在表单提交上这样做可能更有用:
$('form').submit(function() { $('input[type=submit]', this).attr("disabled","disabled"); });
但是,如果我们对上下文有更多了解,我认为我们可以更好地回答您的问题。
如果这是一个ajax请求,那么您需要确保在成功或失败时再次启用提交按钮。
如果这是一个标准的HTTP表单提交(除了使用javascript禁用按钮),并且你这样做是为了安全地防止同一表单的多个提交,那么你应该在代码中有某种控制来处理提交数据,因为使用javascript禁用按钮可能无法阻止多次提交。
你可以这样做:
$('form').submit(function() { $(this) .find(":submit,:image") // get all the submit buttons .attr({ disabled : 'disabled' }) // disable them .end() // go back to this form .submit(function() { // change the onsubmit to always reject. return false; }) ; });
这样做的好处:
- 它将适用于所有表单,以及所有提交方法:
- 单击提交元素
- 按回车,或
- 从其他一些代码调用
form.submit()
- 它将禁用所有提交元素:
-
- 它真的很短。
我猜你在处理提交时不希望他们多次点击提交按钮。
我的方法是完全隐藏按钮并显示某种状态指示器(动画gif等)。
这是一个非常人为的例子(技术上是原型,但我认为jquery版本非常相似):
在JQuery中:
$('#SubmitButtonID').click(function() { this.disabled = true; });
需要注意的是,在提交表单之前不应禁用该按钮。 如果在OnClick事件中使用javascript禁用该按钮,则可能会丢失表单提交。
因此,我建议您使用javascript通过在其上方放置图像或将按钮移出可见范围来隐藏按钮。 这应该允许表单提交正常进行。
有三种方式可以提交应该涵盖的表单。 同时使用David McLaughlin和Jimmy的建议。 一个将禁用提交按钮表单元素,而另一个禁用基本HTML表单提交。
对于第三个,这些不会禁止Javascript执行form.submit()。 OnSubmit="return false"
方法仅适用于用户单击提交按钮或在输入表单元素中按Enter键。 客户端脚本也需要处理。
怎么样
代码背后 :
btnContinue3.Attributes.Item(“onclick”)=“disableSubmit()”
Javascript :
function disableSubmit() { document.getElementById('btnContinue3').onclick = function() { alert('Please only click once on the submit button!'); return false; }; }
这并没有解决如果回发超时会发生什么的问题,但除了它对我有用之外。