js防止表单重复提交

简介: 在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交,产生重复数据。我们应该怎么办了?一般想法是:通过attachEvent在 form的onsubmit事件中写一个方法,每次触发该事件时执行该方法,我们可以给form增加一个submited属性,每次判断这个属性,为 false的时候继续提交表单并且设置form.submited=true,反之说明表单已经提交,就不再提交表单
在表单提交的时候,用户有时候会重复的点击提交按钮,会导致多次提交,产生重复数据。我们应该怎么办了?一般想法是:通过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>
</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检测,不需要额外的权限支持。
当然方法还有比如让后退失效,让按钮失效显示“等待。。。”等等

目录
相关文章
|
26天前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
24 1
|
1月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
45 3
|
2月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
53 4
|
2月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
3月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
3月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
29 9
|
3月前
|
人工智能 前端开发 JavaScript
react js 处理表单( form )的2个例子
react js 处理表单( form )的2个例子
|
4月前
|
大数据 数据处理 分布式计算
JSF 逆袭大数据江湖!看前端框架如何挑战数据处理极限?揭秘这场技术与勇气的较量!
【8月更文挑战第31天】在信息爆炸时代,大数据已成为企业和政府决策的关键。JavaServer Faces(JSF)作为标准的 Java Web 框架,如何与大数据技术结合,高效处理大规模数据集?本文探讨大数据的挑战与机遇,介绍 JSF 与 Hadoop、Apache Spark 等技术的融合,展示其实现高效数据存储和处理的潜力,并提供示例代码,助您构建强大的大数据系统。
55 0
|
4月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
43 0
|
4月前
|
前端开发 微服务 API
微服务浪潮下的JSF革新:如何在分散式架构中构建统一而强大的Web界面
【8月更文挑战第31天】随着微服务架构的兴起,企业将应用拆分成小型、独立的服务以提高系统可维护性和可扩展性。本文探讨如何在微服务架构下构建和部署JavaServer Faces (JSF) 应用,通过RESTful服务实现前后端分离,提升灵活性和适应性。
65 0