脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript技巧 → js 提交

JavaScript禁止用户多次提交的两种方法

 更新时间：2016年07月24日 16:58:55   作者：924256520  
这篇文章主要介绍了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禁止用户多次提交的两种方法

【当服务器超载时，会出现提交卡顿的现象，但是用户在操作时，会不停重复点击提交，会造成服务器压力更大。所以我们需要进行限制】

[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禁止用户多次提交的两种方法的相关资料，希望对大家有所帮助！

您可能感兴趣的文章:

相关文章

  • encode脚本和normal脚本混用的问题与解决方法

    encode脚本和normal脚本混用的问题与解决方法

    encode脚本和normal脚本混用的问题与解决方法...
    2007-03-03
  • js防止页面被iframe调用的方法

    js防止页面被iframe调用的方法

    这篇文章主要介绍了js防止页面被iframe调用的方法,可防止页面被别的网站iframe调用,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • JavaScript array常用方法代码实例详解

    JavaScript array常用方法代码实例详解

    这篇文章主要介绍了JavaScript array常用方法代码实例详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • 微信端开发--登录小程序步骤

    微信端开发--登录小程序步骤

    本篇文章主要介绍了微信端开发--登录小程序步骤，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-01-01
  • JavaScript ES6中const、let与var的对比详解

    JavaScript ES6中const、let与var的对比详解

    这篇文章主要给大家介绍了在JavaScript中const、let与var对比的相关资料，文中通过示例代码介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟着小编来一起看看吧。
    2017-06-06
  • JS继承实现方法及优缺点详解

    JS继承实现方法及优缺点详解

    这篇文章主要介绍了JS继承实现方法及优缺点详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2020-09-09
  • javascript tabIndex属性

    javascript tabIndex属性

    围绕表单的可访问性与交互性上，各浏览器都下了很大工夫，比如fieldset与legend等用于增强区域感的元素，for，accessKey，defaultValue，maxlength，tabIndex等用于交互或提示的属性。不过，今天只讲tabIndex。
    2009-12-12
  • js Canvas实现的日历时钟案例分享

    js Canvas实现的日历时钟案例分享

    本文主要分享了js实现的日历时钟案例，具有一定的参考价值，下面跟着小编一起来看下吧
    2016-12-12
  • 让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码

    让textarea自动调整大小的js代码，需要的朋友可以参考下。
    2011-04-04
  • js数字滑动时钟的简单实现(示例讲解)

    js数字滑动时钟的简单实现(示例讲解)

    下面小编就为大家带来一篇js数字滑动时钟的简单实现(示例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08

最新评论