天天看点

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方法执行前,判断表单是否在提交。

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检测,不需要额外的权限支持。

当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等

继续阅读