关闭

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

标签: 表单提交jqeury按钮变灰重复提交数据
18216人阅读 评论(0) 收藏 举报
分类:

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


<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

  第一种:

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



 第二种:

<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

3
1
查看评论

jQuery 防止相同的事件快速重复触发

重复触发就是防止用户重复点击提交数据了,我们一般都是点击之后没反应会再次点击了,这个不但要从用户体验上来做好,还在要js或php程序脚本上做好,让用户知道点击是己提交服务器正在处理,下面我就整理从脚本上来处理此重复触发的问题。 很多时候事件会被快速重复触发,比如 click,这样就会执行两次代码,...
  • flower_vip
  • flower_vip
  • 2017-02-27 16:05
  • 3576

防止按钮重复点击的js实现

在网页开发过程中经常遇到防止
  • liyi109030
  • liyi109030
  • 2014-06-29 12:58
  • 3967

jquery防止按钮重复点击

防止用户重复点击
  • citunying6597
  • citunying6597
  • 2017-11-14 14:46
  • 474

HTML中jquery控制button按钮可点击、不可点击

HTML中jquery控制button按钮可点击、不可点击 1.首先来说button按钮不可点击 1.1第一种(html代码中控制) 按钮不可点击 1.2第二种(jquery控制) $("#button_id").attr('disabled',true);...
  • CSDNones
  • CSDNones
  • 2016-08-18 11:10
  • 32388

JQuery脚本-通过禁用按钮防止表单重复提交

/* jquer 脚本,避免重复提交 隐藏点击的submit,后在他之后插入同名button伪装成被隐藏的submit 最后禁用全部可见的submit和button 最终效果:点击按钮提交表单后,点击后退按钮,返回提交表单页面,提交按钮已被禁用 注:此方法毕竟在客户端处理,防君子不防小人 */ ...
  • moqiang02
  • moqiang02
  • 2014-08-21 07:50
  • 2118

jquery表单防重复提交

网站中防止表单重复提交是一个比较普遍的需求,解决办法很多种 有利用session和cookie即生成个一次性token放在表单隐藏域防重复提交 有利用js设置变量锁定 这里以设置表单失效来实现 注册 .submit-btn{ color: #fff;bac...
  • nuli888
  • nuli888
  • 2016-07-08 13:00
  • 6474

Jquery的$.ajax防止重复提交的方法

1、第一种,对于onclick事件触发的的ajax可以采用如下方法: 即在beforeSend中使点击按钮不可用,ajax结果返回后置为可用 $.ajax( { type: 'POST', url: APP+'?m=Shoppin...
  • liuzp111
  • liuzp111
  • 2016-09-22 19:23
  • 6994

防止表单重复提交的八种简单有效的策略

表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。 用户提交表单时可能因...
  • myhuashengmi
  • myhuashengmi
  • 2016-09-28 21:25
  • 34924

js防止表单重复提交

在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交表单,产生重复数据。 提交表单一般有三种方式 1.submit按钮 会调用onsubmit方法事件 2.当form中只有一个文本本框按回车的时候提交 会调用onsubmit事件 3.调用表单的submit方法提交 前两种是可以触发...
  • xiaoflsuper
  • xiaoflsuper
  • 2016-05-11 13:30
  • 1467

防止用户将表单重复提交的方法汇总

表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次。 点击刷新按钮。 使用浏览器后退按钮重复之前的操作,导致重复提交表单。 使用浏览器历史记录重复提交表单。 浏览器重复的HTTP请求。   几种防止表单重复提交的方法   ...
  • java173842219
  • java173842219
  • 2017-02-14 14:14
  • 2498
    个人资料
    • 访问:468010次
    • 积分:5963
    • 等级:
    • 排名:第5081名
    • 原创:169篇
    • 转载:16篇
    • 译文:0篇
    • 评论:161条
    联系方式
    博客专栏
    最新评论