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禁止用户多次提交的两种方法的相关资料，希望对大家有所帮助！