JavaScript禁止用户多次提交方法

【当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大。所以我们需要进行限制】

[1]将提交按钮禁止

<html>

  <head>

    <script>

      //禁止默认行为   因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能

    function preventDef(event){

      event=event||window.event;

      if(event.preventDefault){

        return event.preventDefault;

        }else{

         return event.returnValue=false;

        }

      }

    window.onload=function(){

    var form=document.getElementsByTagName(‘form‘)[0];      //获取到form元素

    var txt=form.elements[‘txt‘];                    //获取到name属性为txt的表单元素

    var sub=form.elements[‘sub‘];                    //获取到name属性为sub的表单元素

    form.onsubmit=function(event){                  //创建一个提交事件,因为submit是form来提交事件的,所以我们要禁止也需要通过form来禁止

      event=event || window.event;                  

      preventDef(event);                      //禁止掉默认提交行为

      sub.disabled=true    //第一种就是在用户提交完之后,将按钮禁用不再让用户提交,等待提交完毕之后再释放按钮

      

      setTimeout(function(){                    //模拟5秒钟后再提交

      form.submit()},5000);

    }

}

    </script>

  </head>

  <body>

    <form id="form">

      <input type="text" id="txt" name="txt">

      <input type="submit" id="sub">

    </form>

  </body>

</html>

-------------------------------------------------------------------------------------------------------

[第二种 创建一个变量进行判断]

[1]将提交按钮禁止

<html>

  <head>

    <script>

      //禁止默认行为   因为这里要模拟服务器超载的时候,所以需要先禁止掉submit按钮自动提交的功能

    function preventDef(event){

      event=event||window.event;

      if(event.preventDefault){

        return event.preventDefault;

        }else{

         return event.returnValue=false;

        }

      }

    window.onload=function(){

    var form=document.getElementsByTagName(‘form‘)[0];      //获取到form元素

    var txt=form.elements[‘txt‘];                    //获取到name属性为txt的表单元素

    var sub=form.elements[‘sub‘];                    //获取到name属性为sub的表单元素

    var  flag=true;                            //先创建一个变量,表示默认的时候用户还没点击提交

    form.onsubmit=function(event){                  //创建一个提交事件,因为submit是form来提交事件的,所以我们要禁止也需要通过form来禁止

      event=event || window.event;                  

      preventDef(event);                      //禁止掉默认提交行为

      if(flag==true){

          flag=false;                    //表示用户已经点击过提交按钮

      }else{

        alert(‘正在提交,请勿重复提交‘);          

      }

      

      setTimeout(function(){                    //模拟5秒钟后再提交

      form.submit()},5000);

    }

}

    </script>

  </head>

  <body>

    <form id="form">

      <input type="text" id="txt" name="txt">

      <input type="submit" id="sub">

    </form>

  </body>

</html>

时间: 2024-07-30 10:13:04

JavaScript禁止用户多次提交方法的相关文章

简单实现禁止用户复制自己网页文字

<html><head><title>禁止用户复制网页内容(方法一)</title></head><body onselectstart="return false"><p>本特效由巴黎接机网(www.balijieji.com)编辑提供</p></table></body></html>

控制表单控件-修改表单的提交方法

代码: —————————————————————————— <script type="text/javascript">            //修改表单的提交方法            function modifyMethod(){                var f = document.forms[0];            //获取表单DOM                var method = f.myMethod.value;    //选择的

在JavaScript中重写jQuery对象的方法

jQuery是一个很好的类库,它给我们解决了很多的客户端编程,任何东西都不是万能的,当它不能满足我们的需求时我们需要对它进行重写,同时也不要影响其原有的功能或者修改其原有的功能:我现在的web应用程序大多数时候的数据交互都是通过Ajax来完成的,这样就可以将一些隐藏字段的数据保存在HTML标签的属性中,使HTML标签的代码量减少,如:ID,Timestamp等等,这些不需要用户输入但又不得不提交的字段,通过表单提交的做法是 <input name="ID" value="

AJAX提交方法(POST)Demon

AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:"?str=String&str2=String2"):str和str2为变量名,String和String2为要发送的值. 其他与Get差不多. 下面是一个发送并接收username和password的Demon,先创建一个.html文件,名称随意,代码如下: <body>

如何保证用户登陆时提交密码已经加密

如何保证用户登陆时提交密码已经加密?密码是否已加密,需要客户端和服务端建立约定,双方按约定办事就行了. 这里提到的另一个问题是,如何保证传输安全?最理想的方案当然是走 HTTPS 协议. HTTPS 在理论上是可靠的,但在国内会打一些折扣:你可以随便找一台电脑看看有没有安装商业公司或机构的根证书,这些根证书为线路某节点成为中间人提供了可能性:同时,在木马横行的年代,密码在加密提交前可能就被拿到了,此时 HTTPS 成了摆设,这是为什么国内流行密码控件的一个重要原因. 从成本和需求上考虑,对于众多

ios10中禁止用户缩放页面

在ios10前我们能通过设置meta来禁止用户缩放页面: [html] view plain copy<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 在ios10系统中meta设置失效了: 为了提高Safari中网站的辅助功能,即使网站在视口中设置了user-scalable = no

jQuery实现form表单基于ajax无刷新提交方法详解

本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!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.o

Javascript常用对象的属性和方法

javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算)和Date(日期)三种对象和其它一些相关的方法.从而为编程人员快速开发强大的脚本程序提供了非常有利的条件. 1.常用内部对象 在javascript中对于对象属性与方法的引用,有两种情况:其一是说该对象是静态对象,即在引用该对象的属性或方法时不需要为它创建实例:而另一种对象则在引用它的对象或方法是

jQuery的ajax的form提交方法应用

1.如果不用ajax的form提交,就必须把表单的每一条数据进行获取,并提交给action进行处理.这样做比较麻烦,现在用了jQuery的easyui,使用封装好的ajax的form提交.脚本代码如下: //提交表单 function sysusersave(){ if($.formValidator.pageIsValid()){//校验表单输入信息是否合法 //使用jquery的ajax from提交,指定from的id和回调方法,提交的url使用提from中的action,参数为空,传递J