js防止表单的重复提交

来源：互联网发布：91.vido.ws pinup.php 编辑：程序博客网时间：2024/05/14 09:55

js防止表单的重复提交

在表单提交的时候，用户有时候会重复的点击提交按钮，会导致多次提交，产生重复数据。我们应该怎么办了？一般想法是：通过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方法执行前，判断表单是否在提交。

实例代码如下：

<!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>
</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检测，不需要额外的权限支持。
当然方法还有比如让后退失效，让按钮失效显示“等待。。。”等等

0 0