视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Jquery实现表单提交按钮变灰,防止多次点击提交重复数据
2020-11-27 20:36:04 责编:小采
文档

表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。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, 具体可以参考下面这篇博文:

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

(1)在表单提交页面生成一个唯一的token;token可以保存在session中。(若使用了缓存,也可以保存在缓存中)

(2)提交的时候验证,后台首先验证token,验证通过,才可以进行提交操作;

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

更多相关教程请访问 JavaScript视频教程

下载本文
显示全文
专题