【当服务器超载时，会出现提交卡顿的现象，但是用户在操作时，会不停重复点击提交，会造成服务器压力更大。所以我们需要进行限制】
[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禁止用户多次提交的两种方法的相关资料，希望对大家有所帮助！