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

时间：2021-05-26

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

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

声明：本页内容来源网络，仅供用户参考；我单位不保证亦不表示资料全面及准确无误，也不保证亦不表示这些资料为最新信息，如因任何原因，本网内容或者用户因倚赖本网内容造成任何损失或损害，我单位将不会负任何法律责任。如涉及版权问题，请提交至online#300.cn邮箱联系删除。

相关文章