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

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

  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. $(this).attr("disabled","true"); //设置变灰按钮
  8. $("#messageForm").submit();//提交表单
  9. setTimeout("$('#submit').removeAttr('disabled')",3000); //设置三秒后提交按钮 显示
  10. })
  11. </scritp></span>
  12. </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

第一种:

  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. </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>


 第二种:

  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

上一篇:SQL 中having 和where的区别分析


下一篇:九度oj 题目1034:寻找大富翁