编程 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使用cookie

Feb 02 Javascript

用jscript启动sqlserver

Jun 21 Javascript

angularJS 中input示例分享

Feb 09 Javascript

java中String类型变量的赋值问题介绍

Mar 23 Javascript

Vue单页式应用(Hash模式下)实现微信分享的实例

Jul 21 Javascript

JS按钮闪烁功能的实现代码

Jul 21 Javascript

element-ui中的select下拉列表设置默认值方法

Aug 24 Javascript

angularJs中跳转到指定的锚点实例($anchorScroll)

Aug 31 Javascript

VUE-cli3使用 svg-sprite-loader

Oct 20 Javascript

使用vue-cli4.0快速搭建一个项目的方法步骤

Dec 04 Javascript

nuxt 路由、过渡特效、中间件的实现代码

Nov 06 Javascript

JavaScript实现下拉列表

Jan 20 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

ThinkPHP3.2.1图片验证码实现方法

2016/08/19 PHP

jquery聚焦文本框与扩展文本框聚焦方法

2012/10/12 Javascript

使用jquery+CSS实现控制打印样式

2014/12/31 Javascript

javascript通过元素id和name直接取得元素的方法

2015/04/28 Javascript

jquery实现带缩略图的全屏图片画廊效果实例

2015/06/25 Javascript

JavaScript自定义浏览器滚动条兼容IE、火狐和chrome

2017/01/05 Javascript

深入理解AngularJS中的ng-bind-html指令

2017/03/27 Javascript

jQuery实现动态添加、删除按钮及input输入框的方法

2017/04/27 jQuery

详解Node.js利用node-git-server快速搭建git服务器

2017/09/27 Javascript

JavaScript自执行函数和jQuery扩展方法详解

2017/10/27 jQuery

js读取本地文件的实例

2017/12/22 Javascript

JS获取子节点、父节点和兄弟节点的方法实例总结

2018/07/06 Javascript

vue.js 添加 fastclick的支持方法

2018/08/28 Javascript

Vue.js实现表格渲染的方法

2018/09/07 Javascript

详解如何在微信小程序开发中正确的使用vant ui组件

2018/09/13 Javascript

如何检查一个对象是否为空

2019/04/11 Javascript

jQuery zTree插件快速实现目录树

2019/08/16 jQuery

Vue项目前后端联调(使用proxyTable实现跨域方式)

2020/07/18 Javascript

[51:10]VP vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.19

2018/08/21 DOTA

Python中subprocess模块用法实例详解

2015/05/20 Python

Windows 7下Python Web环境搭建图文教程

2018/03/20 Python

python实现在pandas.DataFrame添加一行

2018/04/04 Python

Jupyter notebook远程访问服务器的方法

2018/05/24 Python

Python使用pandas处理CSV文件的实例讲解

2018/06/22 Python

对pandas中两种数据类型Series和DataFrame的区别详解

2018/11/12 Python

Python的Lambda函数用法详解

2019/09/03 Python

python主线程与子线程的结束顺序实例解析

2019/12/17 Python

python序列化与数据持久化实例详解

2019/12/20 Python

Python爬虫设置Cookie解决网站拦截并爬取蚂蚁短租的问题

2021/02/22 Python

社会实践心得体会

2014/01/03 职场文书

遥感技术与仪器求职信

2014/02/22 职场文书

留学生求职信

2014/06/03 职场文书

小学生暑假安全保证书

2015/07/13 职场文书

2016年“5.12”护士节慰问信

2015/11/30 职场文书

详解JAVA中的OPTIONAL

2021/06/14 Java/Android

python接口测试返回数据为字典取值方式

2022/02/12 Python