编程 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 相关文章推荐

Textarea根据内容自适应高度

Oct 28 Javascript

【经典源码收藏】基于jQuery的项目常见函数封装集合

Jun 07 Javascript

JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()

Aug 11 Javascript

详解前端自动化工具gulp自动添加版本号

Dec 20 Javascript

javascript表单正则应用

Feb 04 Javascript

layui导航栏实现代码

May 19 Javascript

Angular.js前台传list数组由后台spring MVC接收数组示例代码

Jul 31 Javascript

vue+iview+less+echarts实战项目总结

Feb 22 Javascript

vue结合Echarts实现点击高亮效果的示例

Mar 17 Javascript

浅谈PDF.js使用心得

Jun 07 Javascript

简单了解JS打开url的方法

Feb 21 Javascript

原生JS实现飞机大战小游戏

Jun 09 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

PHP UTF8中文字符截断函数代码

2012/09/11 PHP

PHP中文分词自动获取关键词介绍

2012/11/13 PHP

又拍云异步上传实例教程详解

2016/04/19 PHP

PHP框架Laravel中实现supervisor执行异步进程的方法

2017/06/07 PHP

js解析与序列化json数据(一)json.stringify()的基本用法

2013/02/01 Javascript

checkbox全选所涉及到的知识点介绍

2013/12/31 Javascript

jQuery修改li下的样式以及li下的img的src的值的方法

2014/11/02 Javascript

jQuery实现html表格动态添加新行的方法

2015/05/28 Javascript

jquery验证邮箱格式是否正确实例讲解

2015/11/16 Javascript

js获取指定字符前/后的字符串简单实例

2016/10/27 Javascript

Bootstrap基本样式学习笔记之表格(2)

2016/12/07 Javascript

nodejs实现发出蜂鸣声音(系统报警声)的方法

2017/01/18 NodeJs

javascript事件的传播基础实例讲解(35)

2017/02/14 Javascript

详解react-router如何实现按需加载

2017/06/15 Javascript

vue使用mint-ui实现下拉刷新和无限滚动的示例代码

2017/11/06 Javascript

vue-router判断页面未登录自动跳转到登录页的方法示例

2018/11/04 Javascript

jquery实现二级导航下拉菜单效果实例

2019/05/14 jQuery

vue实现Input输入框模糊查询方法

2021/01/29 Javascript

Python的Django框架中的URL配置与松耦合

2015/07/15 Python

Python实现获取磁盘剩余空间的2种方法

2017/06/07 Python

python opencv实现运动检测

2018/07/10 Python

python操作excel文件并输出txt文件的实例

2018/07/10 Python

判断python字典中key是否存在的两种方法

2018/08/10 Python

Python实现查找二叉搜索树第k大的节点功能示例

2019/01/24 Python

使用OpenCV实现仿射变换—平移功能

2019/08/29 Python

使用python远程操作linux过程解析

2019/12/04 Python

Python2与Python3的区别点整理

2019/12/12 Python

css3 响应式媒体查询的示例代码

2019/09/25 HTML / CSS

马来西亚航空官方网站：Malaysia Airlines

2017/07/28 全球购物

澳大利亚波西米亚风情网上商店：Czarina

2019/03/18 全球购物

戴森比利时官方网站：Dyson BE

2020/10/03 全球购物

会计与出纳自荐书范文

2014/03/16 职场文书

高考励志标语

2014/06/05 职场文书

税务干部群众路线教育实践活动对照检查材料

2014/09/20 职场文书

2014年纪检监察工作总结

2014/11/11 职场文书

Python 快速验证代理IP是否有效的方法实现

2021/07/15 Python