這篇文章主要介紹了JavaScript禁止用戶(hù)多次提交的兩種方法的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下
【當(dāng)服務(wù)器超載時(shí)，會(huì)出現(xiàn)提交卡頓的現(xiàn)象，但是用戶(hù)在操作時(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 //第一種就是在用戶(hù)提交完之后，將按鈕禁用不再讓用戶(hù)提交，等待提交完畢之后再釋放按鈕
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í)候用戶(hù)還沒(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; //表示用戶(hù)已經(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禁止用戶(hù)多次提交的兩種方法
【當(dāng)服務(wù)器超載時(shí)，會(huì)出現(xiàn)提交卡頓的現(xiàn)象，但是用戶(hù)在操作時(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 //第一種就是在用戶(hù)提交完之后，將按鈕禁用不再讓用戶(hù)提交，等待提交完畢之后再釋放按鈕
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í)候用戶(hù)還沒(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; //表示用戶(hù)已經(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禁止用戶(hù)多次提交的兩種方法的相關(guān)資料，希望對(duì)大家有所幫助！
公考類(lèi)
招聘類(lèi)
各類(lèi)考試
公眾號(hào)
事業(yè)單位
當(dāng)前位置：