编程 Javascript

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禁止用户多次提交的两种方法

- Author -

924256520

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javascript 网页跳转的方法

Dec 24 Javascript

jquery.cvtooltip.js 基于jquery的气泡提示插件

Nov 19 Javascript

基于jquery的可多选的下拉列表框

Jul 20 Javascript

jquery 动态创建元素的方式介绍及应用

Apr 21 Javascript

AngularJS语法详解（续）

Jan 23 Javascript

BootStrapTable 单选及取值的实现方法

Jan 10 Javascript

angular.js指令中的controller、compile与link函数的不同之处

May 10 Javascript

用ES6写全屏滚动插件的示例代码

May 02 Javascript

详解Webpack多环境代码打包的方法

Aug 03 Javascript

Vue2实时监听表单变化的示例讲解

Aug 30 Javascript

使用koa2创建web项目的方法步骤

Mar 12 Javascript

js实现右键弹出自定义菜单

Sep 08 Javascript

JavaScript表单焦点自动切换代码

Jul 24 #Javascript

javascript中sort排序实例详解

Jul 24 #Javascript

深入理解javascript作用域第二篇之词法作用域和动态作用域

Jul 24 #Javascript

关于input全选反选恶心的异常情况

Jul 24 #Javascript

JS中的==运算： [''] == false —>true

Jul 24 #Javascript

JavaScript关于提高网站性能的几点建议(一)

Jul 24 #Javascript

JavaScript提高网站性能优化的建议(二)

Jul 24 #Javascript

You might like

WAR3重制版DOTA 5V5初体验

2020/04/09 DOTA

php disk_free_space 返回目录可用空间

2010/05/10 PHP

PHP中file_exists函数不支持中文名的解决方法

2014/07/26 PHP

PHP实现递归无限级分类

2015/10/22 PHP

WordPress中查询文章的循环Loop结构及用法分析

2015/12/17 PHP

PHP文字转图片功能原理与实现方法分析

2017/08/31 PHP

javascript之锁定表格栏位

2007/06/29 Javascript

自己整理的一个javascript日期处理函数

2010/10/16 Javascript

php实例分享之实现显示网站运行时间

2014/05/20 Javascript

JS+CSS实现鼠标滑过时动态翻滚的导航条效果

2015/09/24 Javascript

使用jQuery制作Web页面遮罩层插件的实例教程

2016/05/26 Javascript

vue 打包后的文件部署到express服务器上的方法

2017/08/09 Javascript

vue实现百度语音合成的实例讲解

2019/10/14 Javascript

详解jQuery中的prop()使用方法

2020/01/05 jQuery

javascript实现雪花飘落效果

2020/08/19 Javascript

[50:59]2018DOTA2亚洲邀请赛 4.7 总决赛 LGD vs Mineski第四场

2018/04/10 DOTA

Python设计模式之单例模式实例

2014/04/26 Python

由Python运算π的值深入Python中科学计算的实现

2015/04/17 Python

pandas对指定列进行填充的方法

2018/04/11 Python

在Python中使用defaultdict初始化字典以及应用方法

2018/10/31 Python

自定义django admin model表单提交的例子

2019/08/23 Python

使用python脚本自动创建pip.ini配置文件代码实例

2019/09/20 Python

python cv2读取rtsp实时码流按时生成连续视频文件方式

2019/12/25 Python

python 实现线程之间的通信示例

2020/02/14 Python

Python编程快速上手——strip()函数的正则表达式实现方法分析

2020/02/29 Python

Python异常原理及异常捕捉实现过程解析

2020/03/25 Python

Python基于pandas爬取网页表格数据

2020/05/11 Python

python 使用tkinter+you-get实现视频下载器

2020/11/17 Python

Oracle快照(snapshot)

2015/03/13 面试题

领导证婚人证婚词

2014/01/13 职场文书

领导检查欢迎词

2014/01/14 职场文书

我的求职择业计划书

2014/04/04 职场文书

法院四风对照检查材料思想汇报

2014/10/06 职场文书

python 中的jieba分词库

2021/11/23 Python

JavaWeb实现显示mysql数据库数据

2022/03/19 Java/Android

《战锤40K：暗潮》跳票至9月公布新宣传片

2022/04/03 其他游戏