热烈祝贺台州维博网络的站长论坛隆重上线!(2012-05-28)    热烈庆祝伟大的祖国60周年生日 点击进来我们一起为她祝福吧(2009-09-26)    站长论坛禁止发布广告,一经发现立即删除。谢谢各位合作!.(2009-08-08)    热烈祝贺台州网址导航全面升级,全新版本上线!希望各位一如既往地支持台州网址导航的发展.(2009-03-28)    台州站长论坛恭祝各位新年快乐,牛年行大运!(2009-01-24)    台州Link正式更名为台州网址导航,专业做以台州网址为主的网址导航!(2008-05-23)    热烈祝贺台州Link资讯改名为中国站长资讯!希望在以后日子里得到大家的大力支持和帮助!(2008-04-10)    热烈祝贺台州Link论坛改名为台州站长论坛!希望大家继续支持和鼓励!(2008-04-10)    台州站长论坛原[社会琐碎]版块更名为[生活百科]版块!(2007-09-05)    特此通知:新台州站长论坛的数据信息全部升级成功!">特此通知:新台州站长论坛的数据信息全部升级成功!(2007-09-01)    台州站长论坛对未通过验证的会员进行合理的清除,请您谅解(2007-08-30)    台州网址导航|上网导航诚邀世界各地的网站友情链接和友谊联盟,共同引领网站导航、前进!(2007-08-30)    禁止发广告之类的帖,已发现立即删除!(2007-08-30)    希望各位上传与下载有用资源和最新信息(2007-08-30)    热烈祝贺台州站长论坛全面升级成功,全新上线!(2007-08-30)    
便民网址导航,轻松网上冲浪。
台州维博网络专业开发网站门户平台系统
您当前的位置: 首页 » JavaScript/JQuery编程 » 防止表单重复提交的实现方法!

防止表单重复提交的实现方法!

论坛链接
  • 防止表单重复提交的实现方法!
  • 发布时间:2007-10-06 11:31:38    浏览数:11616    发布者:tznktg    设置字体【   
我们做添加信息页面的时候经常会遇到这样的问题,用户有时候会重复的点击提交按钮(实际上测试人员经常这样干),会导致多次提交,产生重复数据,我们总是要写一段代码要在表单提交后把提交按钮设置disibled=true,这样的代码写了好几处。
  
  初步想法是通过attachEvent在form的onsubmit事件中挂一个方法,每次触发该事件的时候都调用我们定义的方法,我们可以给form增加一个submited属性,每次判断这个属性,为false的时候继续提交表单并且设置form.submited=true,反之说明表单已经提交,就不再表单。

接下来,遇到了一些麻烦:
提交表单有三种方式(我目前用过的,就这三种)
<form action=test.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.baseSubmit = frms.submit;//保存表单原来的submit 方法
frms.submited = false;//添加一个submited属性,并且设置其为false
frms.submit = new Function("$submitForm(this)");//
$addElementEventHandler(frms,"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));
}
}
      <SCRIPT language=javascript type=text/javascript>
function chkUserName()
{
if(!isStr(document.all.userName.value) || len(document.all.userName.value) > 20 || len(document.all.userName.value) < 6)
{
alert("对不起,用户名必须为英文字母、数字或下划线,长度为6~20。");
document.all.userName.focus();
return false;
}
else
{
openHideWin('InfoForm/?strUser='+thisForm.userName.value)
}
}
function checkThisForm() {
if(!isStr(document.all.userName.value) || len(document.all.userName.value) > 20 || len(document.all.userName.value) < 6)
{
alert("对不起,用户名必须为英文字母、数字或下划线,长度为6~20。");
document.all.userName.focus();
return false;
}
if(len(document.all.password.value) > 20 || len(document.all.password.value) < 6 || !isStr(document.all.password.value))
{
alert("对不起,密码必须为英文字母、数字或下划线,长度为6~20。");
document.all.password.focus();
return false;
}
if (document.all.password.value != document.all.confirmPassword.value)
{
alert("对不起,密码与重复密码不一致!");
document.all.confirmPassword.focus();
return false;
}
if (len(trim(document.all.companyName.value)) < 6)
{
alert("对不起,公司名称不能少于6个字符(不包括字符内的空格)!");
document.all.companyName.focus();
return false;
}
if (len(document.all.companyName.value)>100)
{
alert("对不起,公司名称描述过长(最大100个字符,50位中文),请更正!");
document.all.companyName.focus();
return false;
}
if (len(trim(document.all.licenceNumber.value))>80)
{
alert("对不起,公司营业执照描述过长(最大80个字符,40位中文),请更正!");
document.all.licenceNumber.focus();
return false;
}
if (isNaN(document.all.foundDate_Y.value) || len(document.all.foundDate_Y.value)!="4" || document.all.foundDate_Y.value.indexOf(".")!="-1")
{
alert("对不起,请输入正确的公司成立日期的年份部份(四位整数不含小数点)!");
document.all.foundDate_Y.focus();
return false;
}
if (document.all.foundDate_Y.value.indexOf("'")!="-1")
{
alert("公司成立年份中含有特殊字符,请重新输入正确的成立年份!");
document.all.foundDate_Y.focus();
return false;
}
if (len(trim(document.all.foundDate_Y.value)) < 4 || (!checkDate(document.all.foundDate_Y.value,document.all.foundDate_M.value,document.all.foundDate_D.value )))
{
alert("公司成立日期格式或范围不正确,请重新输入!");
document.all.foundDate_Y.focus();
return false;
}
if (len(trim(document.all.registerFund.value)) < 1 || isNaN(document.all.registerFund.value))
{
alert("对不起,请输入注册资金,必须为数字!");
document.all.registerFund.focus();
return false;
}
/*
if (len(trim(document.all.companyIntroduction.value)) < 50 || len(trim(document.all.companyIntroduction.value)) > 5000)
{
alert("对不起,公司简介必须在50-5000之间,为确保申请成功和招聘效果,请尽可能填写详细资料!");
document.all.companyIntroduction.focus();
return false;
}
*/
if (len(trim(document.all.contactPerson.value)) < 1)
{
alert("对不起,联系人不能为空!");
document.all.contactPerson.focus();
return false;
}
if (len(trim(document.all.contactPerson.value))>50)
{
alert("联系人资料描述过长(最大50个字符,25位中文)!");
document.all.contactPerson.focus();
return false;
}
if (len(trim(document.all.contactTel_Z.value))>20 || len(trim(document.all.contactTel_Z.value)) < 3)
{
alert("对不起,电话区号长度不合法,请更正!");
document.all.contactTel_Z.focus();
return false;
}
if (len(trim(document.all.contactTel.value))>50 || len(trim(document.all.contactTel.value)) < 5)
{
alert("对不起,电话号码长度不合法,请更正!");
document.all.contactTel.focus();
return false;
}
var tel;
tel = document.all.contactTel_Z.value + document.all.contactTel.value + document.all.contactTel_E.value;
if(!isNum(tel) || tel.indexOf(".")!="-1")
{
alert("对不起,您输入的电话号码不合法,必须输入数字符号且不含小数点!");
document.all.contactTel_Z.focus();
return false;
}
if(tel.indexOf("'")!="-1")
{
alert("对不起,您输入的电话号码不合法,请更正!");
document.all.contactTel_Z.focus();
return false;
}
if (len(trim(document.all.contactFax_Z.value))>20)
{
alert("对不起,传真区号长度不合法,请更正!");
document.all.contactFax_Z.focus();
return false;
}
if (len(trim(document.all.contactFax.value))>50)
{
alert("对不起,传真号码长度不合法,请更正!");
document.all.contactFax.focus();
return false;
}
var fax;
fax = document.all.contactFax_Z.value + document.all.contactFax.value + document.all.contactFax_E.value;
if (!isNum(fax) || fax.indexOf(".")!="-1")
{
alert("对不起,传真号码不合法,必须输入数字符号且不含小数点!");
document.all.contactFax_Z.focus();
return false;
}
if (fax.indexOf("'")!="-1")
{
alert("对不起,您输入的传真号码不合法,请更正!");
document.all.contactFax_Z.focus();
return false;
}
if(!isEmail(document.all.email.value))
{
alert("请正确填写邮箱地址!");
document.all.email.focus();
return false;
}
if (len(document.all.address_P.value) < 1)
{
alert("请选择贵公司所在省(直辖市)!");
document.all.address_P.focus();
return false;
}
if (len(document.all.address.value) < 1)
{
alert("请详细填写贵公司通讯地址!");
document.all.address.focus();
return false;
}
if (len(trim(document.all.address.value))>100)
{
alert("对不起,公司通讯地址过长(最大100个字符,50位中文),请更正!");
document.all.address.focus();
return false;
}
if (!isNum(document.all.zipCode.value))
{
alert("对不起,邮政编码必须为数字符号!");
document.all.zipCode.focus();
return false;
}
if (len(trim(document.all.zipCode.value))>6 || document.all.zipCode.value.indexOf(".")!="-1")
{
alert("对不起,邮政编码必须输入数字符号不含小数点且最大长度为6!");
document.all.zipCode.focus();
return false;
}
if (len(trim(document.all.homePage.value))>100)
{
alert("对不起,公司主页资料描述过长(最大100个字符,50位中文),请更正!");
document.all.homePage.focus();
return false;
}
[size=2]document.all.thisForm.submit();
document.all.thisForm.Submit.disabled = true;
document.all.thisForm.Submit.value = " 请稍候... ";[/size]
}
</SCRIPT>
      <!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>
<link href="../style/reg.css" rel="stylesheet" type="text/css" />
<link href="../style/ssredar_base.css" rel="stylesheet" type="text/css" />
<style>
p {
text-indent: 0;
padding-left: 30px;
line-height: 30px;}
a {
color: #333;}
</style>
<SCRIPT LANGUAGE="JavaScript">
function f_frameStyleResize(targObj){
var targWin = targObj.parent.document.all[targObj.name];
if(targWin != null) {
var HeightValue = targObj.document.body.scrollHeight;
targWin.style.pixelHeight = HeightValue;
}
}
function f_iframeResize(){
bLoadComplete = true;
f_frameStyleResize(self);
}

var bLoadComplete = false;
</SCRIPT>

<OBJECT id=SSReaderPlug1 style="LEFT: 0px; WIDTH: 0px; TOP: 0px; HEIGHT: 0px" classid=clsid:1DE88635-1C72-401E-B23B-93FA86D30F3B
codebase="/SSReaderPlug.cab#version=3,0,0,1" height=0 width=0>
<PARAM NAME="NewVer" VALUE="3.9.1">
<PARAM NAME="NewData" VALUE="2007-01-23">
<PARAM NAME="DownloadPath" VALUE="http://www.ssreader.com/download/">
</OBJECT>

<SCRIPT LANGUAGE="JavaScript">
<!--
function CovertCRLFToBR(s)
{
var i;
var s2 = s;

while(s2.indexOf(".")>0)
{
i = s2.indexOf(".");
s2 = s2.substring(0, i) + s2.substring(i + 1, s2.length);
}
return s2;
}

function GetHddID(){
var Param;
var Ver;
Ver = SSReaderPlug1.SSReaderVer;
Ver = Ver.substring(0,10);
document.FORM1.SSVer.value = Ver;
Ver = CovertCRLFToBR(Ver);
if(Ver>0 && (Ver-3730001) < 0)
{
Param = SSReaderPlug1.GetHDDKey() ;
document.FORM1.Hddinfo.value = Param;
}
else
{
Param = SSReaderPlug1.GetComputeID()
document.FORM1.Hddinfo.value = Param;
}
}
-->
</Script>
<SCRIPT language='JavaScript'>
function CheckUserName(){
if (FORM1.UserName.value == '' ){
alert('请输入要注册的会员!');
FORM1.UserName.focus();
return false;
}
FORM1.NextStep.disabled=true;
FORM1.NextStep.value='请稍后...'

return true;
}
</SCRIPT>
</head>

<BODY onLoad='GetHddID();f_iframeResize()'>

<!--注册-->
<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>* 输入一个您喜欢的字母组合 </p>
<p>* 用户名:
<input name="UserName" id="usname" type="text" size="16" maxlength="16" />
<input name="jiance" type="button" value="检测用户名" onClick="if(FORM1.usname.value==''){alert('请输入用户名');return;};window.open ('ckuser.asp?Username='+FORM1.usname.value,'newwindow','height=140,width=440,toolbar=no,menubar=no,scrollbars=no, resizable=no,location=no, status=no');"/>
</p>
<p><font color="red"></font></p>
<h6>说 明:</h6>
<p>1、输入您想注册的用户名(必须以字母开头,纯字母或字母与数字的组合,长度不超过16位),如果该用户名没有被占用,就可以继续注册。</p>
<p>2、下载的图书是加密数据,与您注册的用户名直接相关,所以请不要申请使用多个用户名。 </p>
<p>3、请牢记您申请的用户名和密码,忘记它们将会导致您已下载的图书资料无法阅读。 </p>
<p>4、如果您已注册过超星用户名,请使用[续费充值]功能成为超星会员或充值星币,以获得购买、阅读、下载、打印图书资料等服务权限。</p>
<h6 style="color:red;">请详细阅读超星数字图书网用户服务协议,这关系到您的权利与利益!</h6>
<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>
      不管是System还是WEBSITE,不管是数据的增加还是修改都涉及到表单的提交。但是由于宽带的限制,对于页面数据的提交,页面的数据处理总是需要一定的时间。导致有一部分的用户,会重复点击提交按钮。要是不进行特殊的处理的话,会导致相同数据。当然这是我们不想看到的事情。也不是客户想要的。

所以我们不应该let 这事情发生。
方法我觉得应该分为两种:

1.我们可以在服务器端处理这些重复数据,而且这部分处理会增加服务器负担,呵呵,这部分不是我这篇文章讨论的重点。

2.客户端处理:
当然我们应该是用JAVASCRIPT来处理
其实试想一下,不管是用户一次提交,两次提交,N次提交,都是在同一个页面里。因此都是由同一个程序来处理的。
所以我们可以用一个全局变量来处理
var submit=0;
这个变量会一直在这个页面里。
所以来说我们可以let按钮提交一次,let此变量增加1,这样的话就可以计算出来用户到底提交了几次了,剩下的事情我们就好办了。
要是大于1的话,我们就可以禁止他的提交。
var submit=0;
function CheckIsRepeat()
{
if (++submit>1)
{
alert('An attempt was made to submit this form more than once; this extra attempt will be ignored.');
return false;
}
return true;
}
测试CODE:




var submit=0;
function CheckIsRepeat()
{
if (++submit>1)
{
alert('An attempt was made to submit this form more than once; this extra attempt will be ignored.');
return false;
}
return true;
}
      --------------------------------------------------------------------------------
在document.form1.submit();后加
document.body.innerHtml = "<center> Waiting...</center>";
//当然这里的html代码就由你发挥了,还可把这段写成函数,这样维护就方便了!

这一处理,就让用户在等待提交时不会误以为没提交而重复按提交按钮!
娱乐休闲专区A 影视预告B 音乐咖啡C 英语阶梯D 生活百科
网页编程专区E AMPZF HTMLG CSSH JSI ASPJ PHPK JSPL MySQLM AJAX
Linux技术区 N 系统管理O 服务器架设P 网络/硬件Q 编程序开发R 内核/嵌入
管理中心专区S 发布网址T 版主议事U 事务处理