一个JavaScript防止表单重复提交的实例
更新时间：2014年10月21日 16:54:24 投稿：whsnow
防止重复表单提交的方法有很多，本文使用JavaScript来实现防止表单重复提交，很简单，但很实用，新手朋友们不要错过
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>防止重复表单提交</title>
<style>
#refresh{
display: none;
width:200px;
height:20px;
background-color: #ff0;
}
</style>
<script>
var inprocess = false;
window.onload = function(){
document.forms["picker"].onsubmit = validateSubmit;
document.getElementById("refresh").onclick = startOver;
}
function validateSubmit () {
// 防止重复的表单提交
if (inprocess) return;
inprocess = true;
console.log(inprocess);
document.getElementById("submitbutton").disabled = true;
document.getElementById("refresh").style.display = "block";
document.getElementById("message").innerHTML = "<p>正在processing，稍等</p>";
return false;
}
function startOver(){
inprocess = false;
document.getElementById("submitbutton").disabled = false;
document.getElementById("message").innerHTML = "";
document.getElementById("refresh").style.display = "none";
}
</script>
</head>
<body>
<form id="picker" method="post" action="">
group1:<input type="radio" name="group1" value="one" />
group2:<input type="radio" name="group1" value="two" />
group3:<input type="radio" name="group1" value="three" /><br /><br />
Input 1: <input type="text" id="intext" />
Input 2: <input type="text" id="intext2" />
Input 3: <input type="text" id="intext3" />
<input type="submit" id="submitbutton" value="send form" />
</form>
<div id="refresh">
<p>单击我</p>
</div>
<div id="message"></div>
</body>
</html>
相关文章
这篇文章主要介绍了JS实现点击li标签弹出对应的索引功能,结合具体实例形式分析了javascript事件响应、元素遍历等相关操作技巧,需要的朋友可以参考下2019-02-02
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
这篇文章主要介绍了JS基于HTML5的canvas标签实现色相球效果,结合实例形式分析了基于canvas标签实现图形绘制的相关操作技巧,需要的朋友可以参考下2016-08-08
这篇文章主要介绍了如何使用JS实现一个这样的拖拽缩放效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-05-05
Javascript实现的常用算法（如冒泡、快速、鸽巢、奇偶等）
这篇文章主要介绍了Javascript实现的常用算法,如冒泡、快速、鸽巢、选择、木桶、奇偶等,需要的朋友可以参考下2014-04-04
JS获取URL中参数值（QueryString）的4种方法分享
今天碰到要在一个页面获取另外一个页面url传过来的参数，一开始很本能的想到了用 split("?")这样一步步的分解出需要的参数。后来想了一下，肯定会有更加简单的方法的！所以在网上找到了几个很又简单实用的方法，mark下。2014-04-04
该播放器类似框架式的~设置在页面底部 即使查看网页的另一个页面，歌曲也不会因为刷新而停止并重新播放2006-10-10
本篇文章主要是对js中indexof的用法进行了详细的介绍，需要的朋友可以过来参考下，希望对大家有所帮助2013-12-12
可以检验双色球是否中奖的js2008-04-04
这篇文章主要介绍了javascript实现图片跟随鼠标移动效果的方法,涉及javascript鼠标事件及页面元素的相关操作技巧,需要的朋友可以参考下2015-05-05
这篇文章主要介绍了原生 JS Ajax,GET和POST 请求实例代码的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下2016-06-06
最新评论