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检测，不需要额外的权限支持。
当然方法还有比如让后退失效，让按钮失效显示“等待。。。”等等
转载于:https://www.cnblogs.com/fredshare/archive/2011/10/04/2199032.html
js防止表单的重复提交相关推荐
- 表单的重复提交问题解决方案
1.在我们的web开发中,常常会遇到表单的重复提交问题,那么我们的解决方案有两种:①重定向:response.sendrediect(); ②token的使用,即做个标记 下面写一个token的例子: ...
- Spring MVC表单防重复提交
转载自 Spring MVC表单防重复提交 利用Spring MVC的过滤器及token传递验证来实现表单防重复提交. 创建注解 @Target(ElementType.METHOD) @Retent ...
- 如何防止表单的重复提交
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: (1)点击提交按钮两次. (2)点击刷新按钮. (3)使用浏览器后退按钮重复之前的操作, ...
- 表单防重复提交拦截器
表单防重复提交 http://blog.icoolxue.com/submitted-by-spring-mvc-to-prevent-data-duplication/
- 关于表单防重复提交一些东东
前阵子弄了些表单防重复提交的东西,想整理整理,免得下次要用时再四处去找,其实这里的东西还是挺简单的. 原理: 在Session中保存一个表单的唯一编号,将该编号放在一个隐藏域中,同其他数据一同提交.在 ...
- 利用beforeSend实现提交加载中、form表单的重复提交等前端功能
前文 在用JQ+bootstrap写前端的时候,有时需要实现点击按钮后失效的功能,比如下载按钮,为了避免网络延迟而引起的页面不及时跳转,让用户多次点击按钮,造成的服务器压力和用户体验就都不友好.发 ...
- uniqid php 重复_在php使用隐藏字段和uniqid来实现表单的重复提交
在php中,最简单,也是做常用的放发来放置表单重复提交的方法就是设置隐藏域的来实现,在php有一个uniqid();函数,他可以生成唯一的标示符,这样我们就可以通过判断这个标示符来判断表单是不是处于重 ...
- java表单防重复提交_防止表单重复提交的解决方案整理
用户在操作表单Post数据时往往会出现表单数据重复提交的问题,尤其在Web开发中此类问题比较常见.刷新页面,后退操作以前的页面,单机多次按钮都会导致数据重复提交.此类问题是因为浏览器重复提交HTTP请 ...
- python表单防重复提交_防止表单重复提交的几种策略
表单重复提交是在多用户Web应用中最常见.带来很多麻烦的一个问题.有很多的应用场景都会遇到重复提交问题,比如: 点击提交按钮两次. 点击刷新按钮. 使用浏览器后退按钮重复之前的操作,导致重复提交表单. ...
最新文章
- Cell Reports：黄梓芮等揭示大脑皮层中通往意识的“大门”
- 最权威北美放射学会年会回顾：AI的进化与下一个前沿
- 华为硬件笔试 通用器件知识2_华为硬件笔试题(最新版)
- JavaScript window.location物
- partial equation lecture first order pde lecture 1
- [转]总结使用Unity 3D优化游戏运行性能的经验
- 创建一个Business partner reference extension field
- mysql三大范式_MySQL学习笔记
- 这一团糟的代码，真的是我写的？！
- sql示例_操作员之间SQL概述和示例
- Dart获取系统和硬件信息
- java异常中Exception捕获不到的异常
- nginx 之 proxy_pass详解
- Android应用双开实现
- 牛顿迭代法求一元三次方程c语言,C++一元三次方程求解算法 - 小众知识
- Java基础--封装--继承 某公司的雇员分为以下若干类：Employee：这是所有员工总的父类。 SalariedEmployee：Employee的子类
- Linux 自定义service，并重定向输出到日志文件
- Graham扫描法求解凸包问题（C++）
- 缓动动画_核心动画概念：缓入缓出
- Unix和Linux下C语言学习指南
热门文章
- 3.2 神经网络表示
- flask.Config(root_path, defaults=None)
- 如何解除服务器注册,《天龙八部手游》服务器注册上限怎么办 服务器注册方法...
- PolarDB-X 云原生分布式数据库 ＞ API参考 ＞ API参考（2017版本） ＞ 数据库管理类 API ＞ 删除 DRDS 数据库
- 商城系统学习总结（1）——订单与库存在高并发场景下案例解析
- Jquery学习总结（5）——jQuery选择器
- python数据库操作封装_Python 封装一个操作mysql的类
- html select选择事件_用 Java 拿下 HTML 分分钟写个小爬虫
- 实时导出正在运行的虚拟机或检查点
- 高程图 GridMap