JavaScript禁止用户多次提交的两种方法
编程学习 2021-07-04 20:00www.dzhlxh.cn编程入门
这篇文章主要介绍了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禁止用户多次提交的两种方法的相关资料，希望对大家有所帮助！