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