【當服務器超載時,會出現提交卡頓的現象,但是用戶在操作時,會不停重復點擊提交,會造成服務器壓力更大。所以我們需要進行限制】
[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禁止用戶多次提交的兩種方法的相關資料,希望對大家有所幫助!