2008-09-05 49 views
9

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

  • 只有用户点击提交按钮后关闭,但回发到服务器
  • ASP.NET Web表单(.NET 1.1)之前
  • 体型的jQuery(如有库在所有)
  • 如果必须重新加载形式(即信用卡未能启用)

这不是必须的,我这样做,但如果有一个简单的方法来做到这一点,而不必改变太多, 我会做的。 (即,如果没有一个简单的解决办法,我可能不会做,所以不用担心挖得太深)

回答

11

对于所有提交按钮,通过JQuery ,这将会是:

$('input[type=submit]').click(function() { this.disabled = true; }); 

或者,它可能是在表单提交这样做更有用的:

$('form').submit(function() { 
    $('input[type=submit]', this).attr("disabled","disabled"); 
}); 

但我认为我们可以如果我们更了解上下文,可以更好地回答你的问题。

如果这是一个ajax请求,那么您需要确保在成功或失败时再次启用提交按钮。

如果这是一个标准的HTTP表单提交(除了使用JavaScript禁用按钮),并且您正在通过多个提交的相同表单进行安全防护,那么您应该在代码中进行某种控制处理提交的数据,因为使用JavaScript禁用按钮可能不会阻止多次提交。

1

在JQuery的:

$('#SubmitButtonID').click(function() { this.disabled = true; }); 
0

有三种方法可以提交应该覆盖的表单。同时使用David McLaughlin和Jimmy的建议。一个将禁用提交按钮表单元素,而另一个则禁用基本的HTML表单提交。

第三,这些不会禁用Javascript做一个form.submit()。 OnSubmit="return false"方法仅适用于用户单击提交按钮或在输入表单元素中按Enter键。客户端脚本也需要处理。

4

我猜你不希望他们在处理提交时多次点击提交按钮。

我的方法是完全隐藏按钮,而不是显示某种状态指示器(动画gif等)。

这里是一个非常牵强的例子(它在技术上的原型,但我认为一个jQuery版本将是非常相似):

<html> 
    <head> 
     <script type="text/javascript" src="include/js/prototype.js"></script> 

     <script type="text/javascript"> 
      function handleSubmit() 
      { 
       $('submit').hide(); 
       $('progressWheel').show(); 
       return true; 
      } 
     </script> 
    </head> 
    <body> 
     <img src="include/images/progress-wheel_lg.gif" id="progressWheel" style="display:none;"/> 
     <input type="submit" name="submit" id="submit" value="Submit" onclick="handleSubmit();"/> 
    </body> 
</html> 
+0

+1很有帮助,因为我需要通过请求发布的提交按钮值。禁用该按钮意味着该值不会被发布。 – ajbeaven 2011-12-23 03:51:34

0

如何

后面的代码

btnContinue3。属性。项目(“点击”)=“disableSubmit()”

的Javascript

function disableSubmit() { 
    document.getElementById('btnContinue3').onclick = function() { 
     alert('Please only click once on the submit button!'); return false; 
    }; 
} 

这并不解决了会发生什么问题,如果回发超时,但比它为我工作等。

1

要注意的一点是,在提交表单之前,您不应该禁用该按钮。如果您在OnClick事件中使用JavaScript禁用该按钮,则可能会失去表单提交。

所以我建议你通过在上面放置图像或通过将按钮移出可见范围来隐藏使用javascript的按钮。这应该允许表单提交正常进行。

8

你可以做这样的事情:这

$('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()从一些其他的代码
  • 将禁用所有提交内容:
    • <input type="submit"/>
    • <button type="submit"></button>
    • <input type="image" />
  • 这是非常短的。
相关问题