今天看啥
热点:

 在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交表单,产生重复数据。我们应该怎么办了?一般想法是:通过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://www.bkjia.com/newuser.asp">

	<input id=Urld name=Urld type=hidden value="http://www.bkjia.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" onclick='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检测,不需要额外的权限支持。
当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等

 

评论暂时关闭