<!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. DOM遍历-祖先

    遍历 - 祖先 向上遍历 DOM 树 这些 jQuery 方法很有用,它们用于向上遍历 DOM 树: parent() parents() parentsUntil() jQuery parent() ...

  2. 「Vue」起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...

  3. Spring 高级依赖注入方式

    1.处理自动装配的歧义性 1.1 标记首选的bean ​ 使用@Primary 来说明一个bean是首选的. @Component @Primary public class GuoRongCD im ...

  4. （转）Ubuntu 12.04 中安装和配置 Java JDK

    http://www.cnblogs.com/bluestorm/archive/2012/05/10/2493592.html 先去 Oracle下载Linux下的JDK压缩包,我下载的是jdk-7 ...

  5. [验证码识别技术]字符验证码杀手--CNN

    字符验证码杀手--CNN 1 abstract 目前随着深度学习,越来越蓬勃的发展,在图像识别和语音识别中也表现出了强大的生产力.对于普通的深度学习爱好者来说,一上来就去跑那边公开的大型数据库,比如I ...

  6. bootstrap导航栏.nav与.navbar区别

    刚刚看了bootstrap的导航栏,发现有点弄混了,现在来整理一下: 一.简单的ul,li组成的导航: <ul class="nav nav-pills justify-content ...

  7. angular指令的简单练习

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. C++雾中风景3：const用法的小结

    const作为C与C++共有的关键字,很多使用的方式大同小异.但由于C++是一门面向对象的语言,在类和对象中有更多的使用规则.之前学习C语言的时候就被const这个关键字搅得焦头烂额,正巧也借这篇文章 ...

  9. python从2.7升级到3.5 需要主要的问题

    今天鼓足勇气把我们python从2.7升级到3.5.我用的是pycharm开发工具.升级过程遇到一些问题小结下: 1.右击项目: 找到左侧 project interpreter选项,配置项目开发环境 ...

  10. windows配置caffe + python和matlab接口

    参考: http://blog.csdn.net/baidu_26408419/article/details/53711640 http://www.cnblogs.com/love6tao/p/5 ...