js防止表单的重复提交

在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交,产生重复数据。我们应该怎么办了?一般想法是:通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,我们可以给form增加一个submited属性,每次判断这个属性,为 false的时候继续提交表单并且设置form.submited=true,反之说明表单已经提交,就不再提交表单。
但是,出现问题了:提交表单一般有三种方式

1.submit按钮
2.当form中只有一个文本本框按回车的时候
3.自己写脚本提交

前两种是可以触发 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));
}
}

实例代码如下:





无标题文档





新用户注册








第二步:设定用户名

* 用户名:







另一种方法如下:











不过这个有个缺点,就是刷新一次,检测就不起作用,好处就是利用JS检测,不需要额外的权限支持。
当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等

你可能感兴趣的:(js防止表单的重复提交)