Jquery 实现表单提交按钮变灰，防止多次点击提交重复数据

Posted 2020-11-10 星朝

    表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制，下面就是相关的例子和代码。

[html] view plain copy

print?

1. <form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">  
2.     姓名:<input name = "name" type="text" />  
3.              <button type="button" id="submit">提交申请</button>  
4. </form>  
5. <script>  
6. $("#submit").click(function(){  
7.   
8.     $(this).attr("disabled","true"); //设置变灰按钮  
9.     $("#messageForm").submit();//提交表单  
10.     setTimeout("$(\'#submit\').removeAttr(\'disabled\')",3000); //设置三秒后提交按钮 显示  
11.        
12. })  
13. </scritp></span>  
14.   
15. </span>  

<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">
	姓名:<input name = "name" type="text" />
             <button type="button" id="submit">提交申请</button>
</form>
<script>
$("#submit").click(function(){
    $(this).attr("disabled","true"); //设置变灰按钮

    $("#messageForm").submit();//提交表单

    setTimeout("$(\'#submit\').removeAttr(\'disabled\')",3000); //设置三秒后提交按钮 显示

     

})

</scritp></span>
</span>

附：其他的实现方法，也使用了js

  第一种：

[html] view plain copy

print?

1. <form name=fm method="POST" action="/">  
2. <p>按钮变灰</p>  
3.     name: <input type="text" name="name"/>  
4.      <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">  
5.   
6. </form>  

<form name=fm method="POST" action="/">
<p>按钮变灰</p>
    name: <input type="text" name="name"/>
     <input type="button" value="提交" onclick="javascript:{this.disabled=true;document.fm.submit();}">
</form>

 第二种：

[html] view plain copy

print?

1. <form name=fm method="POST" action="/" >  
2.   <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">  
3. </form>  
4. <script language="javascript">  
5.  function submit()  
6.  {  
7.  var submitId=document.getElementById(\'submitId\');  
8.  submitId.disabled=true;  
9.  document.fm.submit();  
10.  setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码  
11. }  
12. </script>   

<form name=fm method="POST" action="/" >
  <input type="submit" name="Submit" value="提交" id="submitId" onclick="submit();">
</form>
<script language="javascript">
 function submit()
 {
 var submitId=document.getElementById(\'submitId\');
 submitId.disabled=true;
 document.fm.submit();
 setTimeout("submitId.disabled=false;",3000); //代码核心在这里，3秒还原按钮代码
}
</script> 

前后代码进行控制，后台代码也要进行控制，这样子就可以确保万无一失了！

后台代码控制表单提交有一个好的办法就是使用session， 具体可以参考下面这篇博文：

JavaWeb学习总结(十三)——使用Session防止表单重复提交

http://www.cnblogs.com/xdp-gacl/p/3859416.html

其实后台控制表单重复提交的原理：

（1）在表单提交页面生成一个唯一的token；token可以保存在session中。（若使用了缓存，也可以保存在缓存中）

（2）提交的时候验证，后台首先验证token，验证通过，才可以进行提交操作；

（3）当表单数据提交成功（保存到数据库-持久化），然后删除session（缓存）中对应的token。

 

在页面中添加Token防止越权访问-也可做表单重复提交，使用的原理也是Token!

http://blog.csdn.net/chinawszjr/article/details/51096095