Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据
表单提交时候我们应该控制提交按钮,不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中,造成系统出现数据垃圾。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>
<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="/">
<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>
<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!
Jquery 实现表单提交按钮变灰,防止多次点击提交重复数据的更多相关文章
- Jquery 实现表单验证,所有验证通过方可提交
1. [代码]Jquery 实现表单验证,所有验证通过方可提交 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 ...
- form表单取消按钮自动提交
默认写在form表单里的按钮可以自动提交表单,现在要实现的效果是点击button按钮调用js函数,再有ajax提交 <button type="button" class=& ...
- jQuery Form 表单提交插件-----formSerialize,fieldSerialize,fieldValue,resetForm,clearForm,clearFields的 应用
一.jQuery Form的其他api 1. formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...
- jQuery Form 表单提交插件----Form 简介,官方文档,官方下载地址
一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...
- 通过AJAX和PHP,提交JQuery Mobile表单
File name: callajax.php <?php $firstName = $_POST[firstName]; $lastName = $_POST[lastName]; echo( ...
- 雷林鹏分享:jQuery EasyUI 表单 - 创建异步提交表单
jQuery EasyUI 表单 - 创建异步提交表单 本教程向您展示如何通过 easyui 提交一个表单(Form).我们创建一个带有 name.email 和 phone 字段的表单.通过使用 e ...
- jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因
jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...
- Jquery form表单提交
起因 由于项目中原先提交from是通过JavaScript指定action,在submit提交的,使用的方式,也不是很标准,造成除了ie之外的浏览器都不能正常的提交数据,做web项目还是要考虑到浏览器 ...
- 使用JS和JQuery 阻止表单提交的两种方法
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
随机推荐
- 观光公交 2011年NOIP全国联赛提高组(贪心,递推)
观光公交 2011年NOIP全国联赛提高组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 风景迷人的小城 Y 市 ...
- 【原创】Eclipse实现图形化界面插件-vs4e
vs4e插件下载地址:http://visualswing4eclipse.googlecode.com/files/vs4e_0.9.12.I20090527-2200.zip 下载完成后,解压,然 ...
- HUE通过oozie工作流执行shell脚本
HUE通过oozie工作流执行shell脚本 2018年01月17日 16:20:38 阅读数:217 首先上传对应的jar包和storm.sh脚本到hdfs,脚本内容如下: 脚本主要内容是:从hdf ...
- java 读取word
读取word文件 import java.io.File; import java.io.FileInputStream; import java.io.InputStream; import org ...
- 使用wkwebview后,页面返回不刷新的问题
onpageshow 事件在用户浏览网页时触发. onpageshow 事件类似于 onload 事件,onload 事件在页面第一次加载时触发, onpageshow 事件在每次加载页面时触发,即 ...
- HTML增加附件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- CF817A Treasure Hunt
思路: 起点(x1, y1),终点(x2, y2),步长(dx, -dy),(dx, dy),(-dx, -dy),(-dx, dy).只要满足abs(x1 - x2) % dx == 0 并且 ab ...
- ImmutableJS
引用大神的一句话:(具体是谁自己问度娘) Shared mutable state is the root of all evil(共享的可变状态是万恶之源) -- Pete Hunt JavaS ...
- 定时器tasktimer
1.web.xml中配置 <servlet> <servlet-name>TaskTimer</servlet-name> <servlet-class> ...
- MySQLWorkBench怎么设置主键自增长
参考 https://blog.csdn.net/qq_40472613/article/details/87858099 勾选AI选项,相当于执行了这个语句: AUTO_INCREMENT表示自增 ...