足球游戏_中国足彩网¥体育资讯$

JavaScript禁止用户多次提交的两种方法
来源:易贤网 阅读:876 次 日期:2016-07-29 14:07:15
温馨提示:易贤网小编为您整理了“JavaScript禁止用户多次提交的两种方法”,方便广大网友查阅!

这篇文章主要介绍了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>

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>

以上所述是小编给大家介绍的JavaScript禁止用户多次提交的两种方法的相关资料,希望对大家有所帮助!

中国足彩网信息请查看网络编程
由于各方面情况的不断调整与变化,易贤网提供的所有考试信息和咨询回复仅供参考,敬请考生以权威部门公布的正式信息和咨询为准!

2025国考·省考课程试听报名

  • 报班类型
  • 姓名
  • 手机号
  • 验证码
关于我们 | 联系我们 | 人才招聘 | 网站声明 | 网站帮助 | 非正式的简要咨询 | 简要咨询须知 | 加入群交流 | 手机站点 | 投诉建议
工业和信息化部备案号:滇ICP备2023014141号-1 足球游戏_中国足彩网¥体育资讯$ 滇公网安备53010202001879号 人力资源服务许可证:(云)人服证字(2023)第0102001523号
云南网警备案专用图标
联系电话:0871-65099533/13759567129 获取招聘考试信息及咨询关注公众号:hfpxwx
咨询QQ:526150442(9:00—18:00)版权所有:易贤网
云南网警报警专用图标