jquery 禁用submit按钮及禁止重复提交的代码

发布时间:2020-06-14编辑:脚本学堂
本文介绍下,jquery实现禁用submit按钮防止重复提交,以及禁止表单多次提交的代码,有需要的朋友,参考下吧。

1,禁用submit按钮,防止重复提交
 

复制代码 代码示例:
<script>
function disabledButton() { 
 $("input[@type='submit']").each(function () { 
   $(this).bind("click", function () { 
   $(this).attr("disabled", true); 
   $(this).parents().filter("form").trigger("submit"); 
 }); 
 }); 
} 
var initFun = window.onload; 
if (initFun == null) { 
 window.onload = disabledButton; 
} else { 
 window.onload = function () { 
 initFun(); 
 disabledButton(); 
 }; 
}
</script>
 

生成js文件,页面加载就可以了.用submit 按钮生效。

2,jquery 中禁止表单多次提交
  在jquery 中,防止提交多次表单其实是很简单的,代码如下:
   

复制代码 代码示例:
<!DOCTYPE html> 
    <html lang="en"> 
        <head> 
            <meta charset="UTF-8" /> 
            <title>Safe submit with jQuery</title> 
            <script type="text/javascript" src="/js/jquery/1.7.1/jquery.min.js"></script> 
            <script type="text/javascript"> 
                $(document).ready(function(){ 
                   $("#submit").click(function( 
                   $(":input").attr("disabled", true); 
                   var dataString =  'name=test'; 
                   $.ajax({ 
                   type: "POST", 
                   url: "1.php", 
                   data: dataString, 
                   success: function(){ 
                                 $(":input").removeAttr('disabled'); 
                   } 
                   }); 
                   return false; 
                   }); 
                }); 
            </script> 
        </head> 
        <body> 
            <form> 
                Name:<input type="test" name="name" id="name" /> 
                <input type="submit" name="submit" id="submit" /> 
            </form> 
        </body> 
    </html> 

3,jQuery防止多次提交
web应用中常见的问题就是多次提交,由于表单提交的延迟,有时几秒或者更长,让用户有机会多次点 击提交按钮,从而导致服务器端代码的种种麻烦。
可以绑定处理程序到表单的提交事件上,在提交按钮第一次点击之后禁止提交按钮。
 

复制代码 代码示例:
$("form").submit(function(){ 
  $(":submit",this).attr("disabled","disabled"); 
}); 

在事件处理程序体内,用:submit选择器来获取表单内所有的提交按钮,并将disable特性值改为disabled(w3c官方推 荐的特性设置)。
不过要注意,建立匹配集的时候我们提供this的上下文值,this指针总是引用已绑定事件的页面元素。

以这种方式禁止提交按钮,不会免除服务器代码的责任。
预防双重提交或者其它类型的验证问题。添加这种代码到客户端能够提高终端用户的界面友好程度,服务器端的代码安全还是要继续加强的。