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检测,不需要额外的权限支持。

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值