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 相关文章推荐
javascript mouseover、mouseout停止事件冒泡的解决方案
Apr 07 Javascript
JavaScript prototype 使用介绍
Aug 29 Javascript
关于jquery中全局函数each使用介绍
Dec 10 Javascript
jQuery中find()方法用法实例
Jan 07 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
Vue.js 父子组件通讯开发实例
Sep 06 Javascript
Bootstrap和Java分页实例第二篇
Dec 23 Javascript
npm 下载指定版本的组件方法
May 17 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
Aug 07 Javascript
JavaScript实现栈结构Stack过程详解
Mar 07 Javascript
JavaScript函数柯里化
Nov 07 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中常用的预定义变量小结
2012/05/09 PHP
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(二)
2014/06/23 PHP
php实现curl模拟ftp上传的方法
2015/07/29 PHP
php中加密解密DES类的简单使用方法示例
2020/03/26 PHP
Jquery刷新页面背景图片随机变换的实现方法
2013/03/15 Javascript
js文件缓存之版本管理详解
2013/07/05 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
jQuery控制Div拖拽效果完整实例分析
2015/04/15 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
AngularJS实现表格的增删改查(仅限前端)
2017/07/04 Javascript
tracking.js页面人脸识别插件使用方法
2020/04/16 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
EasyUI 数据表格datagrid列自适应内容宽度的实现
2019/07/18 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
vue实现跳转接口push 转场动画示例
2019/11/01 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
js实现点赞按钮功能的实例代码
2020/03/06 Javascript
JavaScript实现简单计算器
2020/03/19 Javascript
Vue 的双向绑定原理与用法揭秘
2020/05/06 Javascript
vue 实现把路由单独分离出来
2020/08/13 Javascript
GitHub 热门:Python 算法大全,Star 超过 2 万
2019/04/29 Python
Python画图高斯分布的示例
2019/07/10 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Origins悦木之源香港官网:雅诗兰黛集团高端植物护肤品牌
2018/03/21 全球购物
一套PHP的笔试题
2013/05/31 面试题
护士求职推荐信范文
2013/11/23 职场文书
幼儿园中秋节活动方案2013
2014/01/29 职场文书
保密承诺书范文
2014/03/27 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
武侯祠导游词
2015/02/04 职场文书
python 开心网和豆瓣日记爬取的小爬虫
2021/05/29 Python