在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交,产生重复数据。我们应该怎么办了?一般想法是:通过attachevent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,我们可以给form增加一个submited属性,每次判断这个属性,为 false的时候继续提交表单并且设置form.submited=true,反之说明表单已经提交,就不再提交表单。
但是,出现问题了:提交表单一般有三种方式
<form action=xxx.aspx onsubmit="return false;"name=form1>
1.<input type=submit >submit按钮
2.<input type=text>当form中只有一个文本本框按回车的时候
3.<input type=button onclick=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>
</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" onclick='formsubmit()'>
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检测,不需要额外的权限支持。
当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等