一个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 相关文章推荐
prototype.js的Ajax对象
Sep 23 Javascript
编写兼容IE和FireFox的脚本
May 18 Javascript
jquery $.trim()去除字符串空格的实现方法【附图例】
Mar 30 Javascript
如何在Angular.JS中接收并下载PDF
Nov 26 Javascript
原生JS改变透明度实现轮播效果
Mar 24 Javascript
JavaScrip数组删除特定元素的几种方法总结
Sep 06 Javascript
AjaxUpLoad.js实现文件上传
Mar 05 Javascript
老生常谈JS中的继承及实现代码
Jul 06 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 Javascript
探究一道价值25k的蚂蚁金服异步串行面试题
Aug 21 Javascript
JavaScript Array.flat()函数用法解析
Sep 02 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 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
discuz论坛 用户登录 后台程序代码
2008/11/27 PHP
PHP 字符串分割和比较
2009/10/06 PHP
一个简单的网页密码登陆php代码
2012/07/17 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
jquery异步请求实例代码
2011/06/21 Javascript
我用的一些Node.js开发工具、开发包、框架等总结
2014/09/25 Javascript
JavaScript原生对象之String对象的属性和方法详解
2015/03/13 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript中Object.prototype.toString方法的原理
2016/02/24 Javascript
基于Bootstrap+jQuery.validate实现表单验证
2016/05/30 Javascript
jQuery中值得注意的trigger方法浅析
2016/12/12 Javascript
Angular的MVC和作用域
2016/12/26 Javascript
简单的vue-resourse获取json并应用到模板示例
2017/02/10 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
jQuery实现获取及设置CSS样式操作详解
2018/09/05 jQuery
Vue Components 数字键盘的实现
2019/09/18 Javascript
微信小程序实现限制用户转发功能的实例代码
2020/02/22 Javascript
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
详解vue组件之间的通信
2020/08/30 Javascript
Vue中父子组件的值传递与方法传递
2020/09/28 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01
2020/11/02 DOTA
Python学习笔记之os模块使用总结
2014/11/03 Python
Python使用jsonpath-rw模块处理Json对象操作示例
2018/07/31 Python
深入理解python中sort()与sorted()的区别
2018/08/29 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
京东国际站:JOYBUY
2017/11/23 全球购物
adidas瑞典官方网站:购买阿迪达斯鞋子和运动服
2019/12/11 全球购物
德国Discount-Apotheke中文官网:DC德式康线上药房
2020/02/18 全球购物
教育系毕业生中文求职信范文
2013/10/06 职场文书
医护人员英文求职信范文
2013/11/26 职场文书
医院实习接收函
2014/01/12 职场文书
世博会口号
2014/06/20 职场文书
社区娱乐活动方案
2014/08/21 职场文书
高考升学宴答谢词
2015/01/20 职场文书
Pycharm连接远程服务器并远程调试的全过程
2021/06/24 Python