一个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 相关文章推荐
基于Jquery的标签智能验证实现代码
Dec 27 Javascript
js 输出内容到新窗口具体实现代码
May 31 Javascript
jquery实现checkbox全选全不选的简单实例
Dec 31 Javascript
javascript结合ajax读取txt文件内容
Dec 05 Javascript
AngularJS 使用 UI Router 实现表单向导
Jan 29 Javascript
jQuery select自动选中功能实现方法分析
Nov 28 Javascript
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于JS实现移动端左滑删除功能
Jul 28 Javascript
Vue中computed与methods的区别详解
Mar 24 Javascript
详解使用mpvue开发github小程序总结
Jul 25 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
jQuery擦除插件eraser使用方法详解
Jan 11 jQuery
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
使用ThinkPHP自带的Http类下载远程图片到本地的实现代码
2011/08/02 PHP
解析PHP高效率写法(详解原因)
2013/06/20 PHP
php多任务程序实例解析
2014/07/19 PHP
php面向对象编程self和static的区别
2016/05/08 PHP
[原创]php实现子字符串位置相互对调互换的方法
2016/06/02 PHP
微信公众平台开发教程②微信端分享功能图文详解
2019/04/10 PHP
使javascript也能包含文件
2006/10/26 Javascript
showModalDialog 和 showModelessDialog
2007/01/22 Javascript
javascript中的作用域scope介绍
2010/12/28 Javascript
JS运动框架之分享侧边栏动画实例
2015/03/03 Javascript
JS定时器实现数值从0到10来回变化
2016/12/09 Javascript
详谈jQuery中的一些正则匹配表达式
2017/03/08 Javascript
前端开发之CSS原理详解
2017/03/11 Javascript
Javascript 一些需要注意的细节(必看篇)
2017/07/08 Javascript
bootstrap 通过加减按钮实现输入框组功能
2017/11/15 Javascript
解决vue-cli创建项目的loader问题
2018/03/13 Javascript
Vue中的字符串模板的使用
2018/05/17 Javascript
element-ui的回调函数Events的用法详解
2018/10/16 Javascript
nodejs检测因特网是否断开的解决方案
2019/04/17 NodeJs
发布订阅模式在vue中的实际运用实例详解
2019/06/09 Javascript
element-ui 中使用upload多文件上传只请求一次接口
2019/07/19 Javascript
bootstrap-paginator服务器端分页使用方法详解
2020/02/13 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
用python + openpyxl处理excel2007文档思路以及心得
2014/07/14 Python
python文件写入实例分析
2015/04/08 Python
python数据结构之图深度优先和广度优先实例详解
2015/07/08 Python
python topN 取最大的N个数或最小的N个数方法
2018/06/04 Python
浅谈python写入大量文件的问题
2018/11/09 Python
Python GUI编程学习笔记之tkinter中messagebox、filedialog控件用法详解
2020/03/30 Python
使用Tensorflow-GPU禁用GPU设置(CPU与GPU速度对比)
2020/06/30 Python
CSS3轻松实现圆角效果
2017/11/09 HTML / CSS
css3实现蒙版弹幕功能
2019/06/18 HTML / CSS
CSS3 真的会替代 SCSS 吗
2021/03/09 HTML / CSS
英国电动工具购买网站:Anglia Tool Centre
2017/04/25 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
2015年话务员工作总结
2015/04/29 职场文书