js防止表单重复提交
在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交,产生重复数据。我们应该怎么办了?一般想法是:通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,我们可以给form增加一个submited属性,每次判断这个属性,为 false的时候继续提交表单并且设置form.submited=true,反之说明表单已经提交,就不再提交表单。
但是,出现问题了:提交表单一般有三种方式
<form action=xxx.aspx οnsubmit="return false;"name=form1>
1.<input type=submit >submit按钮
2.<input type=text>当form中只有一个文本本框按回车的时候
3.<input type=button οnclick=javascript: form1.submit()>自己写脚本提交
</form>
前两种是可以触发 onsubmit事件的,但是第三种不会。所以,仅仅捕获onsubmit事件时不行的,还必须在form的submit方法执行前,判断表单是否在提交。
function $setFormCheckSubmited(){
var frms=document.forms;
for(var i=0;i<document.forms.length;i++)
{
frms[i].baseSubmit=frms[i].submit;//保存表单原来的submit 方法
frms[i].submited=false;//添加一个submited属性,并且设置其为false
frms[i].submit=new Function("$submitForm(this)"); $addElementEventHandler(frms[i],"onsubmit","$submitForm(document.forms["+i+"])");
}
}
//提交一个表单,如果当前表单已经提交,按么就不会继续提交该表单
function $submitForm(frm)
{
if (frm.submited) return false;
frm.submited=true;
frm.baseSubmit();
}
//下面是addElementEventHandler的实现
/*
添加一个方法到到一个对象的一个的一个事件中
element 要设置的对象
eventName 事件名称, 字符串类型的。
methodName表示函数名称,字符串类型的。
*/
function $addElementEventHandler(element,eventName,methodName)
{
if (document.all)
{
element.attachEvent(eventName,new Function(methodName));
}
else
{
if (eventName.substring(0,2)=="on") eventName=eventName.substring(2);//firefox中所有的事件名称前面是没有on的。
element.addEventListener(eventName,new Function(methodName));
}
}
实例代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<SCRIPT language='JavaScript'>
function CheckUserName(){
if (document.FORM1.UserName.value == '' ){
alert('请输入要注册的会员!');
document.FORM1.UserName.focus();
return false;
}
document.FORM1.NextStep.disabled=true;
document.FORM1.NextStep.value='请稍后...'
return true;
}
</SCRIPT>
</head>
<BODY>
<!--注册-->
<a name="top"></a>
<h5 id="reg_title">新用户注册</h5>
<form action="/reg/registernew.dll" method="POST" name="FORM1" onSubmit="return CheckUserName();">
<input id=Hddinfo2 name=Hddinfo type=hidden value=1996021993>
<input id="SSVer2" name="SSVer" type="hidden" value="">
<input id=Urls name=Urls type=hidden value="http://reg.ssreader.com/newuser.asp">
<input id=Urld name=Urld type=hidden value="http://reg.ssreader.com/lineuser.asp">
<input id=Proc2 name=Proc type=hidden value=1>
<div id="reg_userland_licence" class="reg_userland_info">
<div class="reg_user_title" id="r_user">第二步:设定用户名 </div>
<p>* 用户名:
<input name="UserName" id="usname" type="text" size="16" maxlength="16" />
</p>
<div style="width: 100%; text-align: center; margin: 25px 0 0 0;">
<input name="NextStep" id="NextStep" type="submit" value="下一步" /></div>
</div>
</form>
</body>
</html>
另一种方法如下:
<DOCTYPE html>
<html>
<BODY BGCOLOR="#FFFFFF">
<form name='formsubmitf' id ="the" method="post" action="XXX.asp">
<input type='hidden' name='mypretime' value='0'>
<input type="button" value="写好了" name="button1" class="4round" οnclick='formsubmit()'>
</form>
<script Language='JavaScript'>
function formsubmit() {
Today = new Date();
var NowHour = Today.getHours();
var NowMinute = Today.getMinutes();
var NowSecond = Today.getSeconds();
var mysec = (NowHour*3600)+(NowMinute*60)+NowSecond;
if((mysec-document.formsubmitf.mypretime.value)>600){
//600只是一个时间值,就是5分钟内禁止重复提交,值随便设
document.formsubmitf.mypretime.value=mysec;
}
else{
alert(' 按一次就够了,请勿重复提交!请耐心等待!谢谢合作!');
return false;
}
document.forms.formsubmitf.submit();
}
</script>
</html>
不过这个有个缺点,就是刷新一次,检测就不起作用,好处就是利用JS检测,不需要额外的权限支持。
当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等
js防止表单重复提交相关推荐
- html怎么防止表单重复提交,js防止表单重复提交的解决方法
防止表单重复提交,通常会通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,可以给form增加一个submited属性,每次判断这个属性,为 fals ...
- JS 防止表单重复提交
<script type="text/javascript"> var checkSubmitFlg = false; function checkSubmit() { ...
- 防止用户将表单重复提交的方法汇总
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
- 防止表单重复提交的八种简单有效的策略
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
- 开发期间模板引擎页面修改以后,要实时生效 || 登陆成功,防止表单重复提交,可以重定向||只有登录之后才能访问相关的页面
去除模板引擎的缓存 th:if 优先级高于 th:text 登陆成功,防止表单重复提交,可以重定向到主页 只有登录之后才能访问相关的页面 login.html <!DOCTYPE html& ...
- 防止表单重复提交的简单有效的策略
点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. 使用浏览器历史记录重复提交表单. 浏览器重复的HTTP请求.用户提交表单时可能因为网速的原因,或者网页被恶意刷 ...
- 【重复提交表单】表单重复提交的三种情况,解决办法
引入 看一个重复提交表单的例子 F12可以看到,请求体中的参数在刷新页面之后仍然保留,因此每一次刷新页面,都会把现有的请求体中的表单数据提交一次到服务器,而接收的页面还是insert.jsp,于是造成 ...
- java 防止表单重复提交
防止表单重复提交,或者是防止按F5 刷新提交表单. 在WEB开发中是经常会碰到这样的问题的. 目前主流的解决方法有以下三种: 1.采用脚本来解决 2.重定向到别的页面 3.使用s:token 标签 由 ...
- php token 表单重复提交,PHP生成token防止表单重复提交2个例子
防止表单重复提交的解决方案非常的简单,我们下面两个例子都是生成一个随机的token验证用户是不是由我们站内提交并且进行重复验证即可实现了. 在网上搜索了一下有很多站长都这样说的 1.提交按钮置disa ...
最新文章
- 地图下载2之天超图瓦片格式
- 以supervisord启动elasticsearch
- 笔记:Online robust principal component analysis via truncated nuclear norm regularization
- 在springboot中构建子模块却无法加载,如果解决?
- Java对象容器——集合Set
- 使用RNN解决NLP中序列标注问题的通用优化思路
- axios 跨域代理
- npm install报错 npm ERR,code ERESOLVE npm ERR,ERESOLVE unable to resolve dependency tree
- Python解决爬虫中文返回乱码问题
- ubuntu命令之dpkg
- Ranger开源流水线docker化实践案例
- Android 如何直播RTMP流
- 电脑能登录QQ和微信,但是打不开网页浏览器
- Flutter学习日记之底部导航栏BottomNavigationBar组件的使用
- mac 更新hosts文件使其生效
- PS使用钢笔工具抠图
- 王姨劝我学HarmonyOS鸿蒙2.0系列教程之五布局方法点击响应!
- 什么触控笔好用又便宜?口碑超好的触控笔推荐
- CentOS7.2 上安装 Docker 教程
- (转)手把手教你写专利申请书•如何申请专利
热门文章
- OpenCASCADE:扩展数据交换(XDE)的简介
- OpenCASCADE:建立Body
- wxWidgets:编写一个应用程序
- boost::static_mutex 的测试程序
- boost::math::quadrature::gauss_kronrod用法的测试程序
- boost::hana::none用法的测试程序
- boost::fusion::result_of::as_map用法的测试程序
- boost::describe模块宏BOOST_DESCRIBE_PP_IS_EMPTY的测试程序
- boost::core模块实现constexpr的地址
- Boost:简单的双图bimap的测试程序