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 相关文章推荐
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 Javascript
Angularjs中如何使用filterFilter函数过滤
Feb 06 Javascript
js运动事件函数详解
Oct 21 Javascript
浅谈JavaScript事件绑定的常用方法及其优缺点分析
Nov 01 Javascript
JavaScript 控制字体大小设置的方法
Nov 23 Javascript
JS搜狐面试题分析
Dec 16 Javascript
angular+webpack2实战例子
May 23 Javascript
webpack打包单页面如何引用的js
Jun 07 Javascript
[js高手之路]原型式继承与寄生式继承详解
Aug 28 Javascript
详解vuex结合localstorage动态监听storage的变化
May 03 Javascript
bootstrap table列和表头对不齐的解决方法
Jul 19 Javascript
详解基于Vue的支持数据双向绑定的select组件
Sep 02 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
Syphon 使用方法
2021/03/03 冲泡冲煮
PHP下操作Linux消息队列完成进程间通信的方法
2010/07/24 PHP
ThinkPHP上使用多说评论插件的方法
2014/10/31 PHP
PHP基于单例模式实现的数据库操作基类
2016/01/15 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
再论Javascript的类继承
2011/03/05 Javascript
一个JQuery写的点击上下滚动的小例子
2011/08/27 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
NodeJS url验证(url-valid)的使用方法
2013/11/18 NodeJs
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
关于img的href和src取变量及赋值的方法
2014/04/28 Javascript
jQuery通过ajax快速批量提交表单数据
2016/10/25 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
2016/12/27 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
jQuery滚动条美化插件nicescroll简单用法示例
2018/04/18 jQuery
karma+webpack搭建vue单元测试环境的方法示例
2018/05/24 Javascript
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
Node.js 如何利用异步提升任务处理速度
2019/01/07 Javascript
手写Vue弹窗Modal的实现代码
2019/09/11 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[01:05:07]DOTA2-DPC中国联赛 正赛 DLG vs Dragon BO3 第一场2月1日
2021/03/11 DOTA
Python Tkinter基础控件用法
2014/09/03 Python
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
Python中将字典转换为列表的方法
2016/09/21 Python
Python多线程经典问题之乘客做公交车算法实例
2017/03/22 Python
Paper Cape官网:美国婴儿和儿童服装品牌
2019/11/02 全球购物
系统管理员的职责包括那些?管理的对象是什么?
2016/09/20 面试题
中英文自我评价语句
2013/12/20 职场文书
继承公证书
2014/04/09 职场文书
土地租赁意向书
2014/07/30 职场文书
股东授权委托书范文
2014/09/13 职场文书
销售员态度差检讨书
2014/10/26 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
一文教你快速生成MySQL数据库关系图
2022/06/28 Redis