JavaScript禁止用户多次提交的两种方法


Posted in Javascript onJuly 24, 2016

【当服务器超载时,会出现提交卡顿的现象,但是用户在操作时,会不停重复点击提交,会造成服务器压力更大。所以我们需要进行限制】

[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禁止用户多次提交的两种方法的相关资料,希望对大家有所帮助!

Javascript 相关文章推荐
延时重复执行函数 lLoopRun.js
May 08 Javascript
在js中单选框和复选框获取值的方式
Nov 06 Javascript
Javascript公共脚本库系列(一): 弹出层脚本
Feb 24 Javascript
初识JQuery 实例一(first)
Mar 16 Javascript
js的一些常用方法小结
Jun 29 Javascript
JavaScript中的null和undefined解析
Apr 14 Javascript
jQuery实现下拉框左右选择的简单实例
Feb 22 Javascript
jquery操作select大全
Apr 25 Javascript
JS 实现Base64编码与解码实例详解
Nov 07 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
js鼠标经过tab选项卡时实现切换延迟
Mar 24 Javascript
原生js实现移动端触摸轮播的示例代码
Dec 22 Javascript
JavaScript表单焦点自动切换代码
Jul 24 #Javascript
javascript中sort排序实例详解
Jul 24 #Javascript
深入理解javascript作用域第二篇之词法作用域和动态作用域
Jul 24 #Javascript
关于input全选反选恶心的异常情况
Jul 24 #Javascript
JS中的==运算: [''] == false —&gt;true
Jul 24 #Javascript
JavaScript关于提高网站性能的几点建议(一)
Jul 24 #Javascript
JavaScript提高网站性能优化的建议(二)
Jul 24 #Javascript
You might like
php采用ajax数据提交post与post常见方法总结
2014/11/10 PHP
thinkphp5 URL和路由的功能详解与实例
2017/12/26 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
Smarty模板变量与调节器实例详解
2019/07/20 PHP
php获取是星期几的的一些常用姿势
2019/12/15 PHP
tbody元素支持嵌套的注意方法
2007/03/24 Javascript
动态修改DOM 里面的 id 属性的弊端分析
2008/09/03 Javascript
JavaScript 继承详解 第一篇
2009/08/30 Javascript
javascript开发随笔一 preventDefault的必要
2011/11/25 Javascript
关于JS中的闭包浅谈
2013/08/23 Javascript
jQuery模拟淘宝购物车功能
2017/02/27 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
讲解vue-router之什么是编程式路由
2018/05/28 Javascript
Nuxt升级2.0.0时出现的问题(小结)
2018/10/08 Javascript
vue实现手机号码的校验实例代码(防抖函数的应用场景)
2019/09/05 Javascript
如何利用node.js开发一个生成逐帧动画的小工具
2019/12/01 Javascript
JavaScript实现公告栏上下滚动效果
2020/03/13 Javascript
jQuery开发仿QQ版音乐播放器
2020/07/10 jQuery
uni-app使用countdown插件实现倒计时
2020/11/01 Javascript
详解Python2.x中对Unicode编码的使用
2015/04/03 Python
Python实现对一个函数应用多个装饰器的方法示例
2018/02/09 Python
Python获取时间戳代码实例
2019/09/24 Python
python处理excel绘制雷达图
2019/10/18 Python
Python二元赋值实用技巧解析
2019/10/25 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
x-ua-compatible content=”IE=7, IE=9″意思理解
2013/07/22 HTML / CSS
使用canvas绘制超炫时钟
2014/12/17 HTML / CSS
公司经理聘任书
2014/03/29 职场文书
教师党员个人自我评价
2015/03/04 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
免职通知
2015/04/23 职场文书
单方投资意向书
2015/05/11 职场文书
初中开学典礼新闻稿
2015/07/17 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技