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

更新时间：2016年07月24日 16:58:55 作者：924256520

这篇文章主要介绍了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禁止用户多次提交的两种方法的相关资料，希望对大家有所帮助！

您可能感兴趣的文章:

js
提交

JavaScript中SQL语句的应用实现
最近一直在用javascript在做项目可是做着做着感觉很多功能代码都是重复的。
2010-05-05
详解ES6数组方法find()、findIndex()的总结
这篇文章主要介绍了详解ES6数组方法find()、findIndex()的总结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2020-05-05
javascript中的event loop事件循环详解
这篇文章主要给大家介绍了关于javascript中event loop事件循环的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2018-12-12
JS+HTML5实现的前端购物车功能插件实例【附demo源码下载】
这篇文章主要介绍了JS+HTML5实现的前端购物车功能插件,结合完整实例形式分析了JS结合HTML5的storage特性存储数据实现购物车功能的相关操作技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
2016-10-10
JavaScript运动函数实例详解
这篇文章主要为大家详细介绍了JavaScript的运动函数，使用实例在论证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
深入了解JavaScript中正则表达式的使用
正则表达式是匹配模式，要么匹配字符，要么匹配位置。在JavaScript中正则表达式常常用来验证表单等。本文将带大家深入了解一下JavaScript中的正则表达式应该如何使用，需要的朋友可以参考一下
2021-12-12
用Javascript读取中文COOKIE的解决办法
用Javascript读取中文COOKIE的解决办法...
2007-02-02
JS实现简单的右下角弹出提示窗口完整实例
这篇文章主要介绍了JS实现简单的右下角弹出提示窗口的方法,可实现点击连接右下角弹出提示框的功能,具有一定参考借鉴价值,需要的朋友可以参考下
2016-06-06
用js格式化金额可设置保留的小数位数
这篇文章主要介绍了如何用js格式化金额并设置保留的小数位数,需要的朋友可以参考下
2014-05-05
js日期格式化yyyy-MM-dd问题
这篇文章主要介绍了js日期格式化yyyy-MM-dd问题，具有很好的参考价值，希望对大家大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01