阻止表单提交按钮多次提交

阻止表单提交按钮多次提交

碰巧看到《超实用jQuery代码段》关于单个页面重复提交按钮，粘张图吧

说明：

　　给提交按钮绑定单击事件，该事件函数内通过attr()函数 先禁用该提交按钮的单击功能，因为此时用户已经提交过一次了，禁用为防止反复操作提交功能。

　　然后使用ajax()函数 实现异步数据通信功能，ajax通信成功后返回函数内重新激活提交按钮功能。

 

---

 

如果表单是通过onsubmit进行Ajax提交，注意将表单提交按钮input type属性设为button，尽量不要设置为submit类型。
另外，在提交事件发出后，最好将提交按钮设置为disabled，防止由于网络延时问题，让用户有机会进行多次点击重复提交。

onclick事件里面执行 $(this).attr('disabled','disabled'); 在点击一次后立马将按钮设置为不可使用。

或者向如下方法另行定义一个jQuery函数来进行控制：
    $("form").submit(function(){  
    $(":submit",this).attr("disabled","disabled");  
    });  

补充：

<input type="button" id="submit" value="提交">

<script>

$(document).ready(function(){  

  $("#submit").click(function(){  

    var nowTime = new Date().getTime();

    var clickTime = $(this).attr("ctime");

    if( clickTime != 'undefined' && (nowTime - clickTime < 5000)){

        alert('操作过于频繁，稍后再试');

        return false;

     }else{

        $(this).attr("ctime",nowTime);

        alert('提交成功');

     }       

   });

 });

</script>

 

总结：

1> 定义标志位：

　点击触发请求后，标志位为false量；请求（或者包括请求后具体的业务流程处理）后，标志位为true量。通过标志位来判断用户点击是否具备应有的响应。

2> 卸载及重载绑定事件：

   点击触发请求后，卸载点击事件；请求（或者包括请求后具体的业务流程处理）后，重新载入绑定事件。

让提交按钮失效，以实现防止按钮重复点击
$(loginBtn).attr('disabled', 'disabled');

$(loginBtn).text('登录中...');

例如：

//2.异步提交
11         $.ajax({
12             url: 'login.do',
13             data: $(this).closest('form[name="loginForm"]').serialize(),
14             type: 'post',
15             beforeSend: function () {
16                 //3.让提交按钮失效，以实现防止按钮重复点击
17                 $(loginBtn).attr('disabled', 'disabled');
18                 
19                 //4.给用户提供友好状态提示
20                 $(loginBtn).text('登录中...');
21             },
22             complete: function () {
23                 //5.让登陆按钮重新有效
24                 $(loginBtn).removeAttr('disabled');
25             },
26             success: function(msg){
27                 
28                 if (msg === 'ok') {
29                     alert('登录成功！');
30                     
31                     //TODO 其他操作...
32                 } else {
33                     alert('登录失败，请重新登录！');
34                 }
35     
36             }
37         });

3> 替换（移除）按钮DOM

   点击触发请求后，将按钮DOM对象替换掉（或者将之移除），自然而然此时不在具备点击事件；请求（或者包括请求后具体的业务流程处理）后，给新的按钮DOM定义点击事件。

4>控制请求频度

　　相信大家碰到过这样的业务，我们允许它重复点击（或者其他用户事件），但是不允许在一定的时间内超过次数XX次。这从用户友好体验及服务器承受压力选取了一个折中方案。

　　

var timer = null;
 2 
 3 $(input).keyup(function(){
 4     
 5     var value = $(this).val();
 6     
 7     clearTimeout(timer); 
 8       
 9     //如果键盘敲击速度太快，小于100毫秒的话就不会向后台发请求，但是最后总会进行一次请求的。
10     timer = setTimeout(function() {
11         //触发请求
12         $.ajax({
13             url: 'typeahead.do',
14             type: 'get',
15             data: value,
16             success: function () {
17                 //显示匹配结果
18                 //......
19             }
20         });
21     },100);
22     
23 });

从宏观意义上来讲，我们需要对每一个按钮去做”防止重复点击提交“，面对这种情况，我们便可以采用一定策略来对其进行封装实现（如定义通用按钮类绑定事件）。

　　从具体情况上来讲，我们并不需要对每一个按钮都去做”防止重复点击提交“，仅仅需要对某些可能具有复杂后台业务逻辑、或者文件上传、或者调用其他非本工程接口导致网络延迟等等情况需要去做”防止重复点击提交“。与此同时，我们必须要给予用户友好提示(如文本提示、渲染loading条、显示文件上传进度条等等)。两者需要一起来看、一起来做。当然，我们可以单独提取状态显示这个实现逻辑。代码如下——

 

 1 //全站ajax加载提示
 2 (function ($) {
 3 
 4     var str = '<div class="ajax-status" style="display: none;">'
 5             +    '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />数据加载中...</div>'
 6             +'</div>';
 7 
 8     var dom = $(str).prependTo('body');
 9 
10     $(document).ajaxStart(function(){
11         dom.stop(true,false).queue(function(){
12             $(this).show().dequeue();
13         });
14     });
15 
16     $(document).ajaxStop(function(){
17         dom.queue(function(){
18             $(this).hide().dequeue();
19         });
20     });
21 
22 })(jQuery);