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 相关文章推荐
Extjs ajax同步请求时post方式参数发送方式
Aug 05 Javascript
javascript json 新手入门文档
Dec 03 Javascript
jQuery提交多个表单的小例子
Jun 30 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
Nov 04 Javascript
使用jQuery.wechat构建微信WEB应用
Oct 09 Javascript
jQuery实现企业网站横幅焦点图切换功能实例
Apr 30 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
node.js基于mongodb的搜索分页示例
Jan 22 Javascript
通过fastclick源码分析彻底解决tap“点透”
Dec 24 Javascript
iview日期控件,双向绑定日期格式的方法
Mar 15 Javascript
Angular 数据请求的实现方法
May 07 Javascript
JS前端可视化canvas动画原理及其推导实现
Aug 05 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
浅谈电磁辐射对健康的影响
2021/03/01 无线电
收音机史话 - 1960年代前后的DIY
2021/03/02 无线电
一次编写,随处运行
2006/10/09 PHP
在Mac上编译安装PHP7的开发环境
2015/07/28 PHP
PHP编程入门的基本语法知识点总结
2016/01/26 PHP
php fread读取文件注意事项
2016/09/24 PHP
php反序列化长度变化尾部字符串逃逸(0CTF-2016-piapiapia)
2020/02/15 PHP
javascript 特性检测并非浏览器检测
2010/01/15 Javascript
一个网页标题title的闪动提示效果实现思路
2014/03/22 Javascript
js的回调函数详解
2015/01/05 Javascript
angularjs学习笔记之双向数据绑定
2015/09/26 Javascript
jquery自适应布局的简单实例
2016/05/28 Javascript
AngularJS实现页面定时刷新
2017/03/14 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
React+Webpack快速上手指南(小结)
2018/08/15 Javascript
Vue组件之高德地图地址选择功能的实例代码
2019/06/21 Javascript
JS函数进阶之prototy用法实例分析
2020/01/15 Javascript
Vue利用localStorage本地缓存使页面刷新验证码不清零功能的实现
2020/09/04 Javascript
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
详解基于element的区间选择组件校验(交易金额)
2021/01/07 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
python中的错误处理
2016/04/10 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
Python统计分析模块statistics用法示例
2019/09/06 Python
如何基于Python Matplotlib实现网格动画
2020/07/20 Python
python判断一个变量是否已经设置的方法
2020/08/13 Python
python wsgiref源码解析
2021/02/06 Python
2014年乡镇党建工作总结
2014/11/11 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
教学质量月活动总结
2015/05/11 职场文书
乡镇司法所2015年度工作总结
2015/10/14 职场文书
古诗文之爱国名句(77句)
2019/09/24 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
MySQL 分组查询的优化方法
2021/05/12 MySQL
MySQL之PXC集群搭建的方法步骤
2021/05/25 MySQL
Flask使用SQLAlchemy实现持久化数据
2021/07/16 Python