js阻止form表单重复提交
防止表单重复提交的方法总体来说有两种,一种是在js中阻止重复提交;另一种是在后台利用token令牌实现,大致思路是生成一个随机码放到session和form表单的隐藏输入框中,提交表单时两者对比,表单处理完毕清空或者修改session中的token。
在js中处理简单易懂,同时能解决我现在所做的项目中的问题,目前暂用js处理,后期如有需要再研究token机制。代码如下:
1、表单提交后禁用提交按钮(在本项目中表单提交完成后,如果处理成功都把form表单关掉了)
/**
* form表单格式验证通过之后、表单提交前将提交按钮禁用(注意顺序)
* @param submitBtnId 提交按钮ID
* @param btnType 按钮类型 'button'或者'linkbutton'
* @returns {Boolean}
*/
function disableSubmitBtn(submitBtnId, btnType){
if(btnType == 'button'){
$("#"+submitBtnId).attr("disabled","disabled");
}else if(btnType == 'linkbutton'){
$("#"+submitBtnId).linkbutton('disable');
}
return true;
}
由于在项目中有用到普通button和easyUI的linkbutton两种按钮,而禁用这两种按钮的方法不同,所以需要多传一个参数btnType(按钮类型)
2、如果提交表单失败则启用按钮,以便用户修改内容后再次提交
/**
* form表单提交失败后将提交按钮开启,以便用户修改数据后再次提交
* @param submitBtnId 提交按钮ID
* @param btnType 按钮类型 'button'或者'linkbutton'
* @returns {Boolean}
*/
function enableSubmitBtn(submitBtnId, btnType){
if(btnType == 'button'){
$("#"+submitBtnId).removeAttr("disabled");
}else if(btnType == 'linkbutton'){
$("#"+submitBtnId).linkbutton('enable');
}
return true;
}
3、在每次表单提交时调用这两个方法,具体放的位置根据实际业务逻辑而定
js阻止form表单重复提交的更多相关文章
- JavaWeb学习总结(十一):Session解决form表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- php 解决和避免form表单重复提交的方法
在提交表单的时候,可能遇到网速等导致页面突然加载变慢,用户重复地点击提交按钮,将在数据库产生多条数据,导致不可控情况. 比如下面的情况就会导致表单重复提交: 点击提交按钮两次. 点击刷新按钮. 使用浏 ...
- form表单重复提交,type=“button”和type=“submit”区别
公司测试提了一个项目后台在IE浏览器下(360,firefox就没问题)出现数据重复的问题,调试了好久终于发现问题所在,也不知道是谁写的代码,醉醉的.... 错误地点: <input type= ...
- easyUI的form表单重复提交处理
1. 问题 生产环境出现过新增用户提交, 入库两条重复数据的情况; 但是我查看代码, 页面做了校验, 后台插入数据也做了校验; 出现这种几率的事件的非常小的, 但是还是会碰到, 客户会对我们的产品产 ...
- js 模拟form表单post提交
var generateHideElement = function (name, value) { var tempInput = document.createElement("inpu ...
- 防止表单提交时刷新页面-阻止form表单的默认提交行为
最近在写 ajax 提交的时候遇到一个问题,在执行 ajax 提交之后,浏览器页面自动刷新了,主要是没有 由于form 表单的默认提交行为.一下是几种阻止 form 表单默认提交行为的方式. 1.使用 ...
- 基于form表单submit提交不跳转
方法一:target <html> <body> <form action="" method="post" target=&qu ...
- java web学习总结(十三) -------------------使用Session防止表单重复提交
在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...
- JavaWeb防止表单重复提交(转载)
转载自:http://blog.csdn.net/ye1992/article/details/42873219 在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用 ...
随机推荐
- Android开发环境搭建之Eclipse/AndroidStudio
时隔两年之后,回头来整理曾经走过的Android开发之路.记录下开发环境的配置,也方便与新入门的小伙伴们快速搭建自己的Android平台. 一.Android SDK Manager 1.下载与安装[ ...
- js 函数返回函数
<script> var aa = function(fn, time, interval){ return function(){ if (typeof(fn) != 'function ...
- MyBatis学习总结(三)——优化MyBatis配置文件中的配置(转载)
本文转载自:http://www.cnblogs.com/jpf-java/p/6013548.html 一.连接数据库的配置单独放在一个properties文件中 之前,我们是直接将数据库的连接配置 ...
- 深入解析PHP中逗号与点号的区别
大部分同学都知道逗号要比点号快,但就是不知道为什么,更不知道逗号与点号这两者之间到底有什么区别.下面小编就来详细的为大家介绍一下,需要的朋友可以过来参考下 echo 'abc'.'def'; //用点 ...
- VMware安装chrome os遇到选择网络问题.
在下载下来的vmx文件中添加一行ethernet0.virtualDev = "e1000" 就可以了.参考网站http://communities.vmware.com/thre ...
- Sqlserver中 登录用户只能看到自己拥有权限的库
执行之前新建用户时不要赋予任何权限 USE master GO --将所有数据库的查看权限给Public角色,每个登录用户只能查看指定的数据库 --此语句会导致服务器上所有的用户在没有设置数据库权限的 ...
- mac eclipse 添加pydev插件 步骤
前提:eclipse环境可以正常使用 python环境可以正常使用 1.下载pydev(http://www.pydev.org/)
- ECMAScript 5中的数据属性和访问器属性
简介 ECMAScript 定义的对象中有两种特殊的属性, 这两种特殊的属性在你定义对象属性时就会赋予, 我们在必要时可以改写这两种特殊的属性让其属性的访问更加的合理化, 这两种特殊的属性称呼及作用如 ...
- cocos2d-x 运行时xcode提示错误:"vtable for XXX", referenced from 问题已解决;
vtable/引用和虚函数相关,今天在添加一个层的时候报了这个错误,很低级的错误,忘了实现虚函数了(谨记!!) 若如果实现了虚函数还依然如此的话,可能是创建的时候忘了钩上 -desktop 选项了,把 ...
- Angular通过CORS实现跨域方案
以前有一篇很老的文章网上转了很多,包括现在如果你百度"跨域"这个关键字,前几个推荐的都是"Javascript跨域总结与解决方案".看了一下感觉手段有点陈旧了, ...