JavaScript禁止用戶多次提交的兩種方法
更新時(shí)間：2016年07月24日 16:58:55 作者：924256520
這篇文章主要介紹了JavaScript禁止用戶多次提交的兩種方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
【當(dāng)服務(wù)器超載時(shí)，會(huì)出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時(shí)，會(huì)不停重復(fù)點(diǎn)擊提交，會(huì)造成服務(wù)器壓力更大。所以我們需要進(jìn)行限制】
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉submit按鈕自動(dòng)提交的功能
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來(lái)提交事件的，所以我們要禁止也需要通過(guò)form來(lái)禁止
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按鈕自動(dòng)提交的功能
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í)候用戶還沒(méi)點(diǎn)擊提交
form.onsubmit=function(event){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來(lái)提交事件的，所以我們要禁止也需要通過(guò)form來(lái)禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
if(flag==true){
flag=false; //表示用戶已經(jīng)點(diǎn)擊過(guò)提交按鈕
}else{
alert('正在提交，請(qǐng)勿重復(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í)，會(huì)出現(xiàn)提交卡頓的現(xiàn)象，但是用戶在操作時(shí)，會(huì)不停重復(fù)點(diǎn)擊提交，會(huì)造成服務(wù)器壓力更大。所以我們需要進(jìn)行限制】
[1]將提交按鈕禁止
<html>
<head>
<script>
//禁止默認(rèn)行為 因?yàn)檫@里要模擬服務(wù)器超載的時(shí)候，所以需要先禁止掉submit按鈕自動(dòng)提交的功能
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來(lái)提交事件的，所以我們要禁止也需要通過(guò)form來(lái)禁止
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按鈕自動(dòng)提交的功能
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í)候用戶還沒(méi)點(diǎn)擊提交
form.onsubmit=function(event){ //創(chuàng)建一個(gè)提交事件，因?yàn)閟ubmit是form來(lái)提交事件的，所以我們要禁止也需要通過(guò)form來(lái)禁止
event=event || window.event;
preventDef(event); //禁止掉默認(rèn)提交行為
if(flag==true){
flag=false; //表示用戶已經(jīng)點(diǎn)擊過(guò)提交按鈕
}else{
alert('正在提交，請(qǐng)勿重復(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)資料，希望對(duì)大家有所幫助！
您可能感興趣的文章:
- JS實(shí)現(xiàn)禁止高頻率連續(xù)點(diǎn)擊的方法【基于ES6語(yǔ)法】
- js禁止瀏覽器的回退事件
- js控制文本框禁止輸入特殊字符詳解
- JS實(shí)現(xiàn)禁止鼠標(biāo)右鍵的功能
- JS禁止查看網(wǎng)頁(yè)源代碼的實(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)頁(yè)鼠標(biāo)右鍵菜單及禁止選擇復(fù)制
- JS實(shí)現(xiàn)禁止用戶使用Ctrl+鼠標(biāo)滾輪縮放網(wǎng)頁(yè)的方法
相關(guān)文章
JavaScript中SQL語(yǔ)句的應(yīng)用實(shí)現(xiàn)
最近一直在用javascript在做項(xiàng)目 可是做著做著 感覺(jué)很多功能代碼都是重復(fù)的。2010-05-05
詳解ES6數(shù)組方法find()、findIndex()的總結(jié)
這篇文章主要介紹了詳解ES6數(shù)組方法find()、findIndex()的總結(jié)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-05-05
javascript中的event loop事件循環(huán)詳解
這篇文章主要給大家介紹了關(guān)于javascript中event loop事件循環(huán)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件實(shí)例【附demo源碼下載】
這篇文章主要介紹了JS+HTML5實(shí)現(xiàn)的前端購(gòu)物車(chē)功能插件,結(jié)合完整實(shí)例形式分析了JS結(jié)合HTML5的storage特性存儲(chǔ)數(shù)據(jù)實(shí)現(xiàn)購(gòu)物車(chē)功能的相關(guān)操作技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2016-10-10
JavaScript運(yùn)動(dòng)函數(shù)實(shí)例詳解
這篇文章主要為大家詳細(xì)介紹了JavaScript的運(yùn)動(dòng)函數(shù)，使用實(shí)例在論證，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-02-02
正則表達(dá)式是匹配模式，要么匹配字符，要么匹配位置。在JavaScript中正則表達(dá)式常常用來(lái)驗(yàn)證表單等。本文將帶大家深入了解一下JavaScript中的正則表達(dá)式應(yīng)該如何使用，需要的朋友可以參考一下2021-12-12
用Javascript讀取中文COOKIE的解決辦法...2007-02-02
JS實(shí)現(xiàn)簡(jiǎn)單的右下角彈出提示窗口完整實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單的右下角彈出提示窗口的方法,可實(shí)現(xiàn)點(diǎn)擊連接右下角彈出提示框的功能,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
用js格式化金額可設(shè)置保留的小數(shù)位數(shù)
這篇文章主要介紹了如何用js格式化金額并設(shè)置保留的小數(shù)位數(shù),需要的朋友可以參考下2014-05-05
這篇文章主要介紹了js日期格式化yyyy-MM-dd問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01