一个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 Validation插件防止重复提交表单的解决方法
Mar 05 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
JS无限极树形菜单,json格式、数组格式通用示例
Jul 30 Javascript
JS Date函数整理方便使用
Oct 23 Javascript
JavaScript使用function定义对象并调用的方法
Mar 23 Javascript
60行js代码实现俄罗斯方块
Mar 31 Javascript
js实现消息滚动效果
Jan 18 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
Element Input组件分析小结
Oct 11 Javascript
Vue3.0的优化总结
Oct 16 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中include()与require()的区别说明
2010/03/10 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
基于PHP实现的事件机制实例分析
2015/06/18 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
php往mysql中批量插入数据实例教程
2018/12/12 PHP
在laravel-admin中列表中禁止某行编辑、删除的方法
2019/10/03 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
JS 控制非法字符的输入代码
2009/12/04 Javascript
jqGrid jQuery 表格插件测试代码
2011/08/23 Javascript
JQuery验证工具类搜集整理
2013/01/16 Javascript
对之前写的jquery分页做下升级
2014/06/19 Javascript
JavaScript验证电子邮箱的函数
2014/08/22 Javascript
jQuery实现布局高宽自适应的简单实例
2016/05/28 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
2016/07/07 Javascript
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
python通过字典dict判断指定键值是否存在的方法
2015/03/21 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
Django Form and ModelForm的区别与使用
2019/12/06 Python
python GUI库图形界面开发之PyQt5图片显示控件QPixmap详细使用方法与实例
2020/02/27 Python
Python 开发工具PyCharm安装教程图文详解(新手必看)
2020/02/28 Python
windows10环境下用anaconda和VScode配置的图文教程
2020/03/30 Python
python 5个顶级异步框架推荐
2020/09/09 Python
资深生产主管自我评价
2013/09/22 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
自立自强的名人事例
2014/02/10 职场文书
运动会广播稿150字
2014/02/19 职场文书
高中课前三分钟演讲稿
2014/08/18 职场文书
整改落实情况汇报材料
2014/10/29 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
尼克胡哲观后感
2015/06/08 职场文书
2016年秋季新学期致辞
2015/07/30 职场文书
勤俭节约主题班会
2015/08/13 职场文书
python爬虫之利用selenium模块自动登录CSDN
2021/04/22 Python
JavaGUI模仿QQ聊天功能完整版
2021/07/04 Java/Android
MySQL中rank() over、dense_rank() over、row_number() over用法介绍
2022/03/23 MySQL