一个JavaScript防止表单重复提交的实例


Posted in Javascript onOctober 21, 2014
<!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>
Javascript 相关文章推荐
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 Javascript
JQuery获取与设置HTML元素的内容或文本的实现代码
Jun 20 Javascript
js实现鼠标滑过文字链接色彩变化的效果
May 06 Javascript
angular-cli修改端口号【angular2】
Apr 19 Javascript
Webpack devServer中的 proxy 实现跨域的解决
Jun 15 Javascript
小程序开发中如何使用async-await并封装公共异步请求的方法
Jan 20 Javascript
如何写好一个vue组件,老夫的一年经验全在这了(推荐)
May 18 Javascript
layer弹出层显示在top顶层的方法
Sep 11 Javascript
layui 数据表格 根据值(1=业务,2=机构)显示中文名称示例
Oct 26 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
Element Tooltip 文字提示的使用示例
Jul 26 Javascript
js编写简易的计算器
Jul 29 Javascript
javascript Deferred和递归次数限制实例
Oct 21 #Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 #Javascript
jquery中post方法用法实例
Oct 21 #Javascript
js调试工具Console命令详解
Oct 21 #Javascript
JS中FRAME的操作问题实例分析
Oct 21 #Javascript
用Jquery.load载入页面后样式没了页面混乱的解决方法
Oct 20 #Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 #Javascript
You might like
php计算十二星座的函数代码
2012/08/21 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
在Mac OS的PHP环境下安装配置MemCache的全过程解析
2016/02/15 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
详解new function(){}和function(){}() 区别分析
2008/03/22 Javascript
dropdownlist之间的互相联动实现(显示与隐藏)
2009/11/24 Javascript
javascript学习笔记(五) Array 数组类型介绍
2012/06/19 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
javascript重写alert方法的实例代码
2013/03/29 Javascript
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
js 去除字符串第一位逗号的方法
2014/06/07 Javascript
JavaScript中检查对象property的存在性方法介绍
2014/12/30 Javascript
JQuery插入DOM节点的方法
2015/06/11 Javascript
JavaScript的removeChild()函数用法详解
2015/12/27 Javascript
node.js中express中间件body-parser的介绍与用法详解
2017/05/23 Javascript
浅谈JS中的反柯里化( uncurrying)
2017/08/17 Javascript
vue组件中使用props传递数据的实例详解
2018/04/08 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
2020/02/07 Javascript
用python实现的可以拷贝或剪切一个文件列表中的所有文件
2009/04/30 Python
总结用Pdb库调试Python的方式及常用的命令
2016/08/18 Python
python如何定义带参数的装饰器
2018/03/20 Python
如何优雅地改进Django中的模板碎片缓存详解
2018/07/04 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python openpyxl使用方法详解
2019/07/18 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
馥蕾诗美国官网:Fresh美国
2019/10/09 全球购物
禁烟标语大全
2014/06/11 职场文书
新闻编辑求职信
2014/07/13 职场文书
中国梦演讲稿5分钟
2014/08/19 职场文书
Redis持久化与主从复制的实践
2021/04/27 Redis
Python Django项目和应用的创建详解
2021/11/27 Python
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
船舶调度指挥系统——助力智慧海事
2022/02/18 无线电