<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>每天一个JavaScript实例-防止反复表单提交</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实例-防止反复表单提交的更多相关文章

  1. 每天一个JavaScript实例-检測表单数据

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 一个简单的jquery ajax表单提交 带数据校验 layer弹框提示

    <input type="hidden" id="url" value="index.php"/> <form id=&q ...

  3. form的onsubmit事件--表单提交前的验证最佳实现方式

    今天遇到了一个问题,页面中include了很多的公共页面(都是没有form的),并且里面好多的地方都是自行提交的(页面中加入一个type=“submit”域,然后js中写入sumbit.click来执 ...

  4. （转）ASP.NET MVC 第五个预览版和表单提交场景

    转自:http://ourlife.blog.51cto.com/708821/296171 上个星期四,ASP.NET MVC开发团队发布了ASP.NET MVC框架的“第五个预览版”.你可以在这里 ...

  5. form表单提交和重置小结

    1. input标签 1.1>input[type=submit] <form name="form" method="post" action=& ...

  6. php+mysql 除了设置主键防止表单提交内容重复外的另一种方法

    感觉好久没有更新博客了,一直在做网站及后台,也没有遇到让我觉得可以整理的内容,之前做的一个系统,已经完成了,后来客户又要求加一个功能,大概就是表单提交的时候,约束有一项不能和以前的内容重复,如图 比如 ...

  7. js表单提交回调函数

    在研究表单的时候发现一个有意思的东西——在表单提交的时候如何保证数据全部提交完毕才会清空? 我们常用的<input type="reset" value="重置&q ...

  8. php 处理 form 表单提交多个 name 属性值相同的 input 标签

    一 问题 在公司的开发过程中,遇到了一个问题:如何处理 form 表单提交了多个 name 属性值相同的 input 标签?源码如下(源码是在 form 表单之中的): <!--{loop $a ...

  9. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

随机推荐

  1. android版火狐调试器

    Remotely debugging Firefox for Android 使用火狐开发工具可以在桌面上进行远程代码的调试(FF26以上) 具体使用参考: https://developer.moz ...

  2. XMLHttpRequest2 异步 ajax

    XMLHttpRequest1只是对已经存在的xhr对象细节进行规范定义, XMLHttpRequest2升级了该对象.   FormData 类型可以用在xhr传输的时候,把表单序列化或者将数据以表 ...

  3. [译]ASP.NET Core 2.0 视图组件

    问题 如何在ASP.NET Core 2.0中使用视图组件? 答案 新建一个空项目,修改Startup类并添加MVC服务和中间件: public void ConfigureServices(ISer ...

  4. 双11Java程序员书单推荐

    Java <Java核心技术卷I> <Java核心技术卷II> <Java编程思想> <Java并发编程实战> <Effective Java&g ...

  5. 关于Linux CentOS 7 时区时间修改问题

    原文:http://blog.csdn.net/yin138/article/details/52765089 今天遇到时区的问题,操作系统为CentOS 7 1. 首先进入终端,使用su root ...

  6. Android开发之漫漫长途 Ⅱ——Activity的显示之Window和View（2）

    该文章是一个系列文章,是本人在Android开发的漫漫长途上的一点感想和记录,我会尽量按照先易后难的顺序进行编写该系列.该系列引用了<Android开发艺术探索>以及<深入理解And ...

  7. 【Kafka源码】broker被选为controller之后的连锁反应

    [TOC] 今天我们主要分析下broker被选为controller之后,主要干了什么.门面代码先列出来: def onControllerFailover() { if (isRunning) { ...

  8. Windows常用shell命令大全

    Windows常用shell命令大全 基于鼠标操作的后果就是OS界面外观发生改变, 就得多花学习成本.更主要的是基于界面引导Path与命令行直达速度是难以比拟的.另外Geek很大一部分是键盘控,而非鼠 ...

  9. IE6常见CSS解析Bug及hack

    IE6常见CSS兼容问题总结 1)图片间隙 A)div中的图片间隙(该bug出现在IE6及更低版本中) 描述:在div中插入图片时,图片会将div下方撑大三像素. hack1:将</div> ...

  10. 开始python成长之路

    因为某种特殊原因很不幸的得了脱髓鞘 正要去实习 大展身手 甚至公司都选好了 可就在这个节骨眼..得了传说中的脱髓鞘.经过一年的修养 我决定还是要站起来 毕竟一生的时间很长 这一段时间 我都在玩游戏赚钱 ...