首頁 > 開發者 > 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禁止使用者多次提交的兩種方法的相關資料，希望對大家有所協助！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
