一个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 相关文章推荐
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
Aug 12 Javascript
深入理解JavaScript高级之词法作用域和作用域链
Dec 10 Javascript
JS网页图片按比例自适应缩放实现方法
Jan 15 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
使用jQuery.Qrcode插件在客户端动态生成二维码并添加自定义Logo
Sep 01 Javascript
JS两种类型的表单提交方法实例分析
Nov 28 Javascript
如何正确理解javascript的模块化
Mar 02 Javascript
在JS中如何把毫秒转换成规定的日期时间格式实例
May 11 Javascript
详解bootstrap导航栏.nav与.navbar区别
Nov 23 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
Jun 17 Javascript
解决echarts中横坐标值显示不全(自动隐藏)问题
Jul 20 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+AJAX 投票器功能
2017/11/11 PHP
一个很简单的办法实现TD的加亮效果.
2006/06/29 Javascript
疯掉了,尽然有js写的操作系统
2007/04/23 Javascript
Javascript 表单之间的数据传递代码
2008/12/04 Javascript
jQuery autocomplete插件修改
2009/04/17 Javascript
jquery实现在页面加载的时自动为日期插件添加当前日期
2014/08/20 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
Angularjs 实现一个幻灯片示例代码
2016/09/08 Javascript
vue2.0开发实践总结之入门篇
2016/12/06 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
利用node.js写一个爬取知乎妹纸图的小爬虫
2017/05/03 Javascript
JavaScript 自定义事件之我见
2017/09/25 Javascript
three.js加载obj模型的实例代码
2017/11/10 Javascript
详解 vue better-scroll滚动插件排坑
2018/02/08 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
快速搭建Node.js(Express)用户注册、登录以及授权的方法
2019/05/09 Javascript
小程序api实现promise封装过程解析
2019/11/21 Javascript
python网络编程学习笔记(六):Web客户端访问
2014/06/09 Python
windows10系统中安装python3.x+scrapy教程
2016/11/08 Python
python三引号输出方法
2019/02/27 Python
python 一个figure上显示多个图像的实例
2019/07/08 Python
Python shutil模块用法实例分析
2019/10/02 Python
详解Django中异步任务之django-celery
2020/11/05 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
英国最大的纸工艺品商店:CraftStash
2018/12/01 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
物理教师自荐信范文
2013/12/28 职场文书
运动会解说词200字
2014/02/06 职场文书
cf战队收人广告词
2014/03/14 职场文书
2014年房地产个人工作总结
2014/12/20 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
经典祝酒词大全
2015/08/12 职场文书
2016春季幼儿园开学寄语
2015/12/03 职场文书
戴尔Win11系统no bootable devices found解决教程
2022/09/23 数码科技