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 相关文章推荐
jQuery 表单验证扩展代码(二)
Oct 20 Javascript
jQuery ReferenceError: $ is not defined 错误的处理办法
May 10 Javascript
jQuery中closest()函数用法实例
Jan 07 Javascript
js console.log打印对像与数组用法详解
Jan 21 Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 Javascript
javascript中Date对象的使用总结
Nov 21 Javascript
JS如何设置iOS中微信浏览器的title
Nov 22 Javascript
AngularJS实现使用路由切换视图的方法
Jan 24 Javascript
详解React Native网络请求fetch简单封装
Aug 10 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
vue-cli结合Element-ui基于cropper.js封装vue实现图片裁剪组件功能
Mar 01 Javascript
antd form表单数据回显操作
Nov 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
WordPress中获取指定分类及其子分类下的文章数目
2015/12/31 PHP
thinkphp框架类库扩展操作示例
2019/11/26 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
重构Javascript代码示例(重构前后对比)
2013/01/23 Javascript
Jquery的hide及toggle方法让超链接慢慢消失
2013/09/06 Javascript
利用js(jquery)操作Cookie的方法说明
2013/12/19 Javascript
js获取页面传来参数的方法
2014/09/06 Javascript
jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)
2016/01/29 Javascript
jQuery实现漂亮实用的商品图片tips提示框效果(无图片箭头+阴影)
2016/04/16 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
2016/07/01 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
使用jsonp实现跨域获取数据实例讲解
2016/12/25 Javascript
Vue框架中正确引入JS库的方法介绍
2017/07/30 Javascript
jQuery Easyui Treegrid实现显示checkbox功能
2017/08/08 jQuery
Angular2 http jsonp的实例详解
2017/08/31 Javascript
使用socket.io制做简易WEB聊天室
2018/01/02 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
jQuery 判断元素是否存在然后按需加载内容的实现代码
2020/01/16 jQuery
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python复数属性和方法运算操作示例
2017/07/21 Python
python自动重试第三方包retrying模块的方法
2018/04/24 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
如何在django中运行scrapy框架
2020/04/22 Python
详解python对象之间的交互
2020/09/29 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
css3圆角边框和边框阴影示例
2014/05/05 HTML / CSS
瑞士设计师家具和家居饰品网上商店:Bruno Wickart
2019/03/18 全球购物
英国最大的滑板品牌选择:Route One
2019/09/22 全球购物
初二政治教学反思
2014/01/12 职场文书
学习保证书范文
2014/04/30 职场文书
带你了解CSS基础知识,样式
2021/07/21 HTML / CSS
Python jiaba库的使用详解
2021/11/23 Python
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js
python中filter,map,reduce的作用
2022/06/10 Python