(客户端)禁用提交按钮的最佳方法是什么?

细节:

  • 仅在用户单击提交按钮后但在回发到服务器之前禁用
  • 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; }; } 

这并没有解决如果回发超时会发生什么的问题,但除了它对我有用之外。