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 —— 禁止通过 Enter 键提交表单
$('btn').on('keydown', function () { return false; })
- Linux—禁止用户SSH登录方法总结
Linux-禁止用户SSH登录方法总结 一.禁止用户登录 1.修改用户配置文件/etc/shadow 将第二栏设置为"*",如下.那么该用户就无法登录.但是使用这种方式 ...
- AJAX提交方法(POST)Demon
AJAX的POST提交方法,本质上来看和GET差不多,有些细小的区别,POST要提交数据时,需要setRequestHeader()方法来提交HTTP头,然后send()方法中提交数据(格式为:&qu ...
- php表单提交方法汇总
问题:网页上提交表单之后,PHP为什么不能获取提交的内容?然而在老版本的PHP上运行却正常. 新版的PHP已经废弃了原来的表单内容处理方式,即不再把提交的表单的内容直接复制到一个同名变量中.解决办法有 ...
- jQuery实现form表单基于ajax无刷新提交方法详解
本文实例讲述了jQuery实现form表单基于ajax无刷新提交方法.分享给大家供大家参考,具体如下: 首先,新建Login.html页面: <!DOCTYPE html PUBLIC &quo ...
- ASP.net 实现禁止用户重复登录
本文先为大家介绍如何利用缓存Cache方便地实现此功能. Cache与Session这二个状态对像的其中有一个不同之处,Cache是一个全局对象,作用的范围是整个应用程序,所有用户:而Session是 ...
- wex5 实战 用户点评与提交设计技巧
最近遇到很多同学做毕业设计,其中有一项是用户点评与提交.功能并不复杂,同学们又不会,做为一个完整的功能,如果用wex5来设计开发,事半功倍.今天就以景区实战来向大家展示wex5的高效与强大.半天可以设 ...
- Javascript常用对象的属性和方法
javascript为我们提供了一些非常有用的常用内部对象和方法.用户不需要用脚本来实现这些功能.这正是基于对象编程的真正目的. 在javascript提供了string(字符串).math(数值计算 ...
- php页面防重复提交方法总结
1.提交按钮置disabled 当用户提交后,立即把按钮置为不可用状态.这种用js来实现. 提交前 复制代码 代码如下: $("#submit").attr('di ...
随机推荐
- ADO.NET中连接SQL Sever
1.在配置文件中定义数据库连接信息. 在配置文件*.config中添加这段代码在<configuration>与</configuration>之间: <connecti ...
- C语言中的静态局部变量
代码: 0x601070 0x7ffcf44243fc 0x60106c 0x60106c 0x60106c [hu@localhost test]$ cat test.cpp #include &l ...
- C++新式类型转换
C++的四种强制类型转换,所以C++不是类型安全的.分别为:static_cast , dynamic_cast , const_cast , reinterpret_cast 新类型的强制转换可以提 ...
- AIX下解决POWERHA的脑裂问题
一.安装创建并发vg时必需的软件包clvm包,该包安装.升级.后必须重启os clvm包的描述:Enhanced Concurrent Logical Volume Manager 软件包在aix61 ...
- 添加AdMob 错误记录
依照官方教程添加文件及其 frameWork后 发现运行报错 错误如下 Undefined symbols for architecture i386: "_OBJC_CLASS_$_ASI ...
- c# 输出excel、word实例只需一行代码
第一.首先下载 WindICFrameNet.dll 下载地址:http://pan.baidu.com/s/1dDBqC9r 第二.前台代码 <div style="display: ...
- Linux下SVN(Subversion)自动启动脚本
在Red Hat Linux中自动运行程序 1.开机启动时自动运行程序 Linux加载后, 它将初始化硬件和设备驱动,然后运行第一个进程init.init根据配置文件继续引导过程,启动其 ...
- 在Fragment中使用BaiduMap SDK
1:fragment_bshdzh.xml <?xml version="1.0" encoding="utf-8"?> <LinearLay ...
- 【经验】在CSS中定义a:link、a:visited、a:hover、a:active顺序
摘自:http://www.qianyunlai.com/post-2.html 以前用CSS一直没有遇到过这个问题,在最近给一个本科同学做的项目里面.出现一些问题,搜索引擎查了一些网站和资料 ...
- LeetCode_Subsets
Given a set of distinct integers, S, return all possible subsets. Note: Elements in a subset must be ...