JavaScript禁止用戶多次提交的兩種方法
更新時(shí)間：2016年07月24日 16:58:55 作者：924256520
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
【當(dāng)服務(wù)器超載時(shí)，會出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時(shí)，會不停重復(fù)點(diǎn)擊提交，會造成服務(wù)器壓力更大。所以我們需要進(jìn)行限制】
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉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){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來提交事件的，所以我們要禁止也需要通過form來禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
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>
[第二種 創(chuàng)建一個(gè)變量進(jìn)行判斷]
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉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; //先創(chuàng)建一個(gè)變量，表示默認(rèn)的時(shí)候用戶還沒點(diǎn)擊提交
form.onsubmit=function(event){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來提交事件的，所以我們要禁止也需要通過form來禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
if(flag==true){
flag=false; //表示用戶已經(jīng)點(diǎn)擊過提交按鈕
}else{
alert('正在提交，請勿重復(fù)提交')；
}
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禁止用戶多次提交的兩種方法
【當(dāng)服務(wù)器超載時(shí)，會出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時(shí)，會不停重復(fù)點(diǎn)擊提交，會造成服務(wù)器壓力更大。所以我們需要進(jìn)行限制】
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉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){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來提交事件的，所以我們要禁止也需要通過form來禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
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>
[第二種 創(chuàng)建一個(gè)變量進(jìn)行判斷]
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉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; //先創(chuàng)建一個(gè)變量，表示默認(rèn)的時(shí)候用戶還沒點(diǎn)擊提交
form.onsubmit=function(event){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來提交事件的，所以我們要禁止也需要通過form來禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
if(flag==true){
flag=false; //表示用戶已經(jīng)點(diǎn)擊過提交按鈕
}else{
alert('正在提交，請勿重復(fù)提交')；
}
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禁止用戶多次提交的兩種方法的相關(guān)資料，希望對大家有所幫助！
您可能感興趣的文章:
- JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語法】
- js禁止瀏覽器的回退事件
- js控制文本框禁止輸入特殊字符詳解
- JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
- JS禁止查看網(wǎng)頁源代碼的實(shí)現(xiàn)方法
- javascript禁止超鏈接跳轉(zhuǎn)的方法
- JavaScript如何禁止Backspace鍵
- JavaScript代碼實(shí)現(xiàn)禁止右鍵、禁選擇、禁粘貼、禁shift、禁ctrl、禁alt
- javascript實(shí)現(xiàn)禁止鼠標(biāo)滾輪事件
- 深入探討JavaScript、JQuery屏蔽網(wǎng)頁鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- JS實(shí)現(xiàn)禁止用戶使用Ctrl+鼠標(biāo)滾輪縮放網(wǎng)頁的方法
相關(guān)文章
encode腳本和normal腳本混用的問題與解決方法...2007-03-03
這篇文章主要介紹了js防止頁面被iframe調(diào)用的方法,可防止頁面被別的網(wǎng)站iframe調(diào)用,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2014-10-10
JavaScript array常用方法代碼實(shí)例詳解
這篇文章主要介紹了JavaScript array常用方法代碼實(shí)例詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
本篇文章主要介紹了微信端開發(fā)--登錄小程序步驟，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01
JavaScript ES6中const、let與var的對比詳解
這篇文章主要給大家介紹了在JavaScript中const、let與var對比的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面跟著小編來一起看看吧。2017-06-06
JS繼承實(shí)現(xiàn)方法及優(yōu)缺點(diǎn)詳解
這篇文章主要介紹了JS繼承實(shí)現(xiàn)方法及優(yōu)缺點(diǎn)詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
圍繞表單的可訪問性與交互性上，各瀏覽器都下了很大工夫，比如fieldset與legend等用于增強(qiáng)區(qū)域感的元素，for，accessKey，defaultValue，maxlength，tabIndex等用于交互或提示的屬性。不過，今天只講tabIndex。2009-12-12
js Canvas實(shí)現(xiàn)的日歷時(shí)鐘案例分享
本文主要分享了js實(shí)現(xiàn)的日歷時(shí)鐘案例，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2016-12-12
讓textarea自動調(diào)整大小的js代碼，需要的朋友可以參考下。2011-04-04
js數(shù)字滑動時(shí)鐘的簡單實(shí)現(xiàn)(示例講解)
下面小編就為大家?guī)硪黄猨s數(shù)字滑動時(shí)鐘的簡單實(shí)現(xiàn)(示例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08