一个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 相关文章推荐
使用delegate方法为一个tr标签加一个链接
Jun 27 Javascript
JS JQUERY实现滚动条自动滚到底的方法
Jan 09 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
Mac下使用charles遇到的问题以及解决办法
Jan 10 Javascript
Bootstrap 下拉多选框插件Bootstrap Multiselect
Jan 22 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
Angular.JS中select下拉框设置value的方法
Jun 20 Javascript
Echarts动态加载多条折线图的实现代码
May 24 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
vue在线动态切换主题色方案
Mar 26 Javascript
前端如何实现动画过渡效果
Feb 05 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/05/07 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP实现根据数组某个键值大小进行排序的方法
2018/03/13 PHP
PHPUnit测试私有属性和方法功能示例
2018/06/12 PHP
在标题栏显示新消息提示,很多公司项目中用到这个方法
2011/11/04 Javascript
Node.js中HTTP模块与事件模块详解
2014/11/14 Javascript
jQuery Validate表单验证深入学习
2015/12/18 Javascript
jquery插件Jplayer使用方法简析
2016/04/22 Javascript
JS不完全国际化&amp;本地化手册 之 理论篇
2016/09/27 Javascript
JQuery.validationEngine表单验证插件(推荐)
2016/12/10 Javascript
javascript验证香港身份证的格式或真实性
2017/02/07 Javascript
JavaScript利用fetch实现异步请求的方法实例
2017/07/26 Javascript
vue cli使用绝对路径引用图片问题的解决
2017/12/06 Javascript
在vue-cli中组件通信的方法
2017/12/16 Javascript
vue移动端路由切换实例分析
2018/05/14 Javascript
在Vue项目中取消ESLint代码检测的步骤讲解
2019/01/27 Javascript
package.json配置文件构成详解
2019/08/27 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
2020/12/16 Javascript
Python读取图片属性信息的实现方法
2016/09/11 Python
Python实现针对给定字符串寻找最长非重复子串的方法
2018/04/21 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
python将数组n等分的实例
2019/12/02 Python
python利用线程实现多任务
2020/09/18 Python
html5手机键盘弹出收起的处理
2020/01/20 HTML / CSS
日本最大级玩偶手办购物:あみあみ Amiami
2018/04/23 全球购物
雷朋巴西官方商店:Ray-Ban Brasil
2020/07/21 全球购物
中年人生感言
2014/02/04 职场文书
绿色家庭事迹材料
2014/05/01 职场文书
重阳节慰问信
2015/02/15 职场文书
十二生肖观后感
2015/06/12 职场文书
幼儿园大班教师评语
2019/06/21 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
Oracle表空间与权限的深入讲解
2021/11/17 Oracle
使用python创建股票的时间序列可视化分析
2022/03/03 Python
Java实现带图形界面的聊天程序
2022/06/10 Java/Android