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

[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>

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

  1. javascript —— 禁止通过 Enter 键提交表单

    $('btn').on('keydown', function () { return false; })

  2. Linux—禁止用户SSH登录方法总结

    Linux-禁止用户SSH登录方法总结 一.禁止用户登录 1.修改用户配置文件/etc/shadow       将第二栏设置为"*",如下.那么该用户就无法登录.但是使用这种方式 ...

  3. AJAX提交方法(POST)Demon

    AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:&qu ...

  4. php表单提交方法汇总

    问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中.解决办法有 ...

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

    本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...

  6. ASP.net 实现禁止用户重复登录

    本文先为大家介绍如何利用缓存Cache方便地实现此功能. Cache与Session这二个状态对像的其中有一个不同之处,Cache是一个全局对象,作用的范围是整个应用程序,所有用户:而Session是 ...

  7. wex5 实战 用户点评与提交设计技巧

    最近遇到很多同学做毕业设计,其中有一项是用户点评与提交.功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍.今天就以景区实战来向大家展示wex5的高效与强大.半天可以设 ...

  8. Javascript常用对象的属性和方法

    javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...

  9. php页面防重复提交方法总结

    1.提交按钮置disabled 当用户提交后,立即把按钮置为不可用状态.这种用js来实现. 提交前 复制代码 代码如下:         $("#submit").attr('di ...

随机推荐

  1. 初学QML之QML和C++混合方法

    混合使用QML和C++的方法 1加载一个QML组件,然后从 C++对其进行操作: 2直接将一个C++对象及其属性嵌入到QML组件: 3定义一个新的QML元素(通过基于QOject的C++类)并在QML ...

  2. Meta 整合

    Meta 整合:http://segmentfault.com/a/1190000002407912

  3. 优化PHP代码的40条建议(转载)

    [size=5][color=Red](译文)优化PHP代码的40条建议[/color][/size] 40 Tips for optimizing your php Code 原文地址:http:/ ...

  4. 接入SDK

    管理提醒: 本帖被 fm2010 设置为精华(2014-11-12) http://www.cocoachina.com/bbs/read.php?tid-239087.html     本帖属于Co ...

  5. MVC中ActionFilterAttribute用法并实现统一授权

    MVC中ActionFilterAttribute经常用来处理权限或者统一操作时的问题. 先写一个简单的例子,如下: 比如现在有一个用户管理中心,而这个用户管理中心需要登录授权后才能进去操作或浏览信息 ...

  6. boostrap 弹出模态对话框,点击黑色区域不会关闭

    $('#ID_ReformDetail').modal({ backdrop: 'static', keyboard: false }); 弹出模态对话框且点击黑色部分不会关闭. <div cl ...

  7. stm32通用定时器中断问题

    在使用stm32的通用定时器定时中断的时候,发现定时器在完成初始化配置后,定时器UIF位会立刻置位,导致在使能中断后,程序会立刻进入定时器中断. 如果设计代码时不希望定时器配置完成后,立刻进入中断,可 ...

  8. Linux iostat监测IO状态(转)

    Linux iostat监测IO状态 2010-03-1  |  13:13分类:Linux,技术细节  |  标签:Linux  |  53,945 views Linux系统出现了性能问题,一般我 ...

  9. Unix/Linux环境C编程入门教程(42) 终端控制篇

    函数介绍 getopt(分析命令行参数) 相关函数 表头文件 #include<unistd.h> 定义函数 int getopt(int argc,char * const argv[ ...

  10. PS抠图神器: KnockOut 2.0安装汉化和使用教程

    PS抠图神器: KnockOut 2.0安装汉化和使用教程 http://jingyan.baidu.com/article/6b97984d8aeadc1ca2b0bf3b.html