html怎么防止表单重复提交,js防止表单重复提交的解决方法

防止表单重复提交,通常会通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,可以给form增加一个submited属性,每次判断这个属性,为 false时继续提交表单并且设置form.submited=true,不则拒绝重复提交。

这样会存在一些问题:提交表单一般有三种方式

submit按钮

当form中只有一个文本本框按回车的时候

自己写脚本提交

前两种是可以触发 onsubmit事件的,但是第三种不会。

因此,仅靠捕获onsubmit事件时不行的,还必须在form的submit方法执行前,判断表单是否在提交。

来看下面的代码:

复制代码 代码示例:

function $setFormCheckSubmited(){

var frms=document.forms;

for(var i=0;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));

}

}

完整的例子如下:

复制代码 代码示例:

防止表单重复提交_www.jquerycn.cn

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;

}

新用户注册
第二步:设定用户名

* 用户名:

另一种实现方法:

复制代码 代码示例:

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();

}

此方法的缺点:刷新一次,检测就不起作用,好处就是利用JS检测,不需要额外的权限支持。

解决问题的方法总是不止一种,哪个更适合你,哪个就是更好的,你说呢?

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/304912.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

gif分解工具_Python之GIF图倒放,沙雕快乐源泉

GIF图现在已经融入了我们的日常网络生活,微信群、QQ群、朋友圈......一言不合就斗图,你怕了吗?不用担心,只要学会了Python之GIF倒放技能,你就是“斗图王”。咱们直接开始本文的内容!使用的工具1PIL(Python …

使用Forms Authentication实现用户注册、登录 (三)用户实体替换

使用Forms Authentication实现用户注册、登录 (三)用户实体替换 收藏IPrincipal和IIdentity通过查阅文档,我们可以看到HttpContext.User属性的类型是IPrincipal接口。然而我们知道,接口通常是不能直接访问的,其背后必定…

微软亚洲研究院全球院友线上欢聚,共话新春

金鼠辞旧岁,金牛报春时;万象正更新,乾坤喜气多。西雅图时间 2 月 6 日,北京时间 2 月 7 日,由微软亚洲研究院院友会西雅图分会主办的“牛转新运”院友新春线上茶话会圆满落幕。重量级嘉宾沈向洋、洪小文、张亚勤、张宏…

从串行线程封闭到对象池、线程池

今天讲一个牛逼而实用的概念,串行线程封闭。对象池是串行线程封闭的典型应用场景;线程池糅合了对象池技术,但核心实现不依赖于对象池,很容易产生误会。 本文从串行线程封闭和对象池入手,最后通过源码分析线程池的核心原…

华硕xhci灰色_xHCI模式作怪无法使用USB设备?解决办法这里有!

最近许多云骑士问题群里朋友向我们反映,自己的USB设备包括USB键盘、鼠标、外置网卡......在重装系统后不能使用了或是启动变慢了许多,那么安装完系统后无法使用USB设备怎么办?经过排查,我们发现这是因为intel xHCI模式设置的问题&#xff0c…

netty springmvc_springmvc源码架构解析之HandlerMapping

说在前面前期回顾sharding-jdbc源码解析 更新完毕spring源码解析 更新完毕spring-mvc源码解析 更新完毕spring-tx源码解析 更新完毕spring-boot源码解析 更新完毕rocketmq源码解析 更新完毕dubbbo源码解析 更新完毕netty源码解析 更新完毕spring源码架构更新完毕springmvc源码架…

单片微型计算机系统应用和开发特点,单片微机原理与应用(第2版)

单片微机原理与应用(第2版)语音编辑锁定讨论上传视频《单片微机原理与应用(第2版)》是2019年7月机械工业出版社出版的图书,作者是罗印升。书 名单片微机原理与应用(第2版)作 者罗印升ISBN9787111538851定 价42.0元出版社机械工业出版社出版时间2019年7月装…

腾讯牛逼,我酸了!!

阅读本文大概需要8分钟。腾讯这两天搞了个业内爆炸沸腾的事情:全员阳光普照发放100股,解禁期一年。腾讯股价近年来一直在疯狂上涨,100股折合人民币6万多:关键是员工什么都没做,直接拿到价值6万的股票。作用可以说是相当…

如何创建生成非 MFC 项目的自定义 AppWizards

当自定义的应用程序向导生成一个项目时,则它只是不能替换自动创建的.dsp 项目设置文件。 .dsp 文件中的项目设置由假定所有生成的项目为 MFC 项目的内部规则设置。 但是,Visual C 5.0 的新对象模型允许修改工具设置,以便从生成的项目中删除所…

这本造价500万的“黑科技”日历,用377张爆美插画给你365天理想生活

以前,每个人家里, 都挂着一本日历。 爷爷戴着老花镜, 盘看着黄道吉日; 奶奶一字一句, 念叨着每日禁忌; 我们跟着日历过日子, 时光缓慢,记忆清晰。 那时候,日历本上的日子…

后端返回number类型数据_Javascript基础教程之数据类型 (数值 Number)

javascript中想限定一个数的数值,无需限定它是整数还是浮点数型var num1 80 ;var num2 55.51;var num3 -34;var num4 9e5;document.write(num1 " " num2 " " num3 " " num4);//运行结果 80 55.51 -34 900000toExponential(…

在计算机科学中计算是指,在计算机中数值计算是指什么

数值计算指有效使用数字计算机求数学问题近似解的方法与过程,以及由相关理论构成的学科。数值计算主要研究如何利用计算机更好的解决各种数学问题,包括连续系统离散化和离散形方程的求解,并考虑误差、收敛性和稳定性等问题。从数学类型分&…

eladmin代码自动生成_如何让Mybatis自动生成代码

点击上方“Java知音”,选择“置顶公众号”技术文章第一时间送达!作者:阿进的写字台cnblogs.com/homejim/p/9782403.html在使用 mybatis 过程中, 当手写 JavaBean 和 XML 写的越来越多的时候, 就越来越容易出错。这种重…

.NET微服务

前文传送门:什么是云原生?现代云原生设计理念Microservices微服务是一种构建现代应用程序的流行的体系结构,云原生系统拥抱微服务。微服务是由一组(使用共享结构交互的、独立的小块服务)搭建的分布式集,具有以下特征:在…

还是找程序员做老公,最靠谱!

很多MM在选老公的时候,都会选择帅气多金,职业又稳定的男生做老公,像医生啊、律师啊、老师啊这类职业。 但是,你有没有想过? 医生的身边都围着好多护士小姐,而且天天加班是常态,相处的时间太少&a…

京瓷1020怎么打印自检页_[建筑]喷墨打印机如何打印自检页 详细

展开全部喷墨打印机如何打印自检页 介绍 打印自我测试、也称为内部测试,可用来32313133353236313431303231363533e59b9ee7ad9431333332636332验证打印机功能。打印自我测试时打印机无需连接到计算机。为每台打印机列出打印自我测试的说明。 可提式的惠普 Deskjet 1.…

计算机基础知识 pdf答案,计算机基础知识练习 答案版.pdf

计算机基础知识练习(B)1.计算机发展阶段的划分是以( )作为标志的。A)存储器 B)逻辑元件 C)程序设计语言 D)运算速度(A)2.世界上第一台电子计算机所采用的电子元件是( )。A)电子管 B)集成电路 C)晶体管 D)大规模及超大规模集成电路(B)3.第二代计算机使用的电子元件是( )。A)电子…

Win XP2实用的修复工具

个人收藏的三个经典Win XP2实用小工具转载于:https://blog.51cto.com/jinboychen/136639

14个超级牛X的免费开源小工具!

最近整理了一些在用的,感觉还不错的开源小工具,有的仅适用MacOS,但多数跨平台。 Homebrew Homebrew — The missing package manager for macOS:https://brew.sh,Mac上非常好用的包管理工具,很多常见的安装…

站在巨人的肩膀,2020我在使用和涉及到的开源项目

背景要想成为一名软件开发者需要学习各种专业知识、技术与框架。比如算法、数据结构、编程语言、流行框架等。但是要想成为更加出色的软件开发者,你要学习的就不仅仅是专业上的知识了。还要懂得利用巨人的肩膀。这是我2020使用和涉及到的开源项目,希望能…