表单提交后，提交按钮不可用，防止用户多次提交

最新推荐文章于 2023-06-09 13:54:38 发布

Zoe_Wang_ing

最新推荐文章于 2023-06-09 13:54:38 发布

阅读量2.3k

点赞数

分类专栏： html js 文章标签： js 表单多次提交

html 同时被 2 个专栏收录

76 篇文章 0 订阅

订阅专栏

70 篇文章 0 订阅

订阅专栏

转载：http://blog.csdn.net/freshlover/article/details/9235189 http://blog.csdn.net/milife2012/article/details/8295437

防止表单提交按钮多次提交的办法

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

如果使用jQuery的话，只需要在onsubmit函数中的开始位置加一句：$("#submit").attr("disabled","disabled");或者向如下方法另行定义一个jQuery函数来进行控制：
    $("form").submit(function(){
    $(":submit",this).attr("disabled","disabled");
    });

在事件处理程序体内，用:submit选择器来获取表单内所有的提交按钮，并将disable特性值改为disabled（w3c标准属性写法）。请注意，建立匹配集的时候我们提供this的上下文值，this指针总是引用已绑定事件的页面元素。

使用原生javascript的话，可以
   document.forms[0].elements[0].disabled = true;   //true的标准写法为'disabled'
   document.forms[0].submit();

但是通过js来控制并不能从根本上杜绝伪造表单攻击等网络安全问题，服务器端也应该对此采取相应措施。

同时，服务器端再次处理，去重处理接收的json数据

[php]view plaincopy 
   
 $res_json = $_POST['postJson'];  
 $res_json = str_replace('\\', '', $res_json);  
 $array = json_decode($res_json, true);  
 //if($id == 8261){debug(self :: unique_arr($array));}  
 $array = self :: unique_arr($array);  

一位数组可以用array_unique和array_flip方法处理，二维数组去除重复元素的处理：

[php]view plaincopy 
   
 public function unique_arr($array2D,$stkeep=false,$ndformat=true)  
 {  
     // 判断是否保留一级数组键 (一级数组键可以为非数字)  
     if($stkeep) $stArr = array_keys($array2D);  
     // 判断是否保留二级数组键 (所有二级数组键必须相同)  
     if($ndformat) $ndArr = array_keys(end($array2D));  
     //降维,也可以用implode,将一维数组转换为用逗号连接的字符串  
     foreach ($array2D as $v){  
         $v = join(",",$v);  
         $temp[] = $v;  
     }  
     //去掉重复的字符串,也就是重复的一维数组  
     $temp = array_unique($temp);  
     //再将拆开的数组重新组装  
     foreach ($temp as $k => $v)  
     {  
         if($stkeep) $k = $stArr[$k];  
         if($ndformat)  
         {  
             $tempArr = explode(",",$v);  
             foreach($tempArr as $ndkey => $ndval) $output[$k][$ndArr[$ndkey]] = $ndval;  
         }  
         else $output[$k] = explode(",",$v);  
     }  
     return $output;  
 }     
 
  
  
 
 
  
  
 
[html]view plaincopy 
     
 <html>  
 <head>  
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
     <title>表单提交后按钮禁用</title>  
 <script type="text/javascript">  
 function sub() {  
     document.forms[0].elements[0].disabled = true;  
     document.forms[0].submit();  
 }  
 </script>  
 </head>  
 <body>  
     <form action="login.action" method="post">  
         <input type="button" name="btn" value="提交表单" onclick="return sub();" />  
     </form>  
 </body>  
 </html>  