<!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. 阿里云centos配置postfix

    1. 为了防止垃圾邮件,先到域名控制面板设置好. MX A 记录及TXT记录 其中TXT记录如下  @  spf1 a mx ~all 意思就是使用spf1协议,允许a记录和MX记录对应的IP,不允许 ...

  2. C# TabControl标签的隐藏

    当你想要隐藏的时候 if (this.tabMain.TabPages[ "tabpageThePage "] != null) { this.tabMain.TabPages.R ...

  3. 无限分级Repeater递归实现：读取一次数据库，使用LINQ2SQL技术，支持排序&amp;显示隐藏

    预览效果图: Selenium 数据库结构: id(int)    classname(string)   parentid(int) sort(int用于显示与排序) 1 家居 0 1 2 家电 0 ...

  4. Python之random

    random 伪随机数生成模块.如果不提供seed,默认使用系统时间. 使用相同seed,可获得相同的随机数序列,常用于测试. >>> from random import * &g ...

  5. 怎么设置按钮的disabled属性

    首先我们要知道怎么去设置 两种方法设置disabled属性 $('#area').attr("disabled",true); $('#area').attr("disa ...

  6. SpringBoot之简单日志配置

    我的目的指定一个文件夹输出:(不采用指定文件的原因是一个文件的大小时间长了会很大,不利于处理) logging: level: root: INFO org.sselab: controller: I ...

  7. 有没有必要参加IT培训

    近几年,IT培训机构可谓是琳琅满目,稂莠不齐.培训Java的,培训PHP的,培训大数据的等等吧,不一而足. 自己也算是IT技术圈子待了好多年了,面试过一些机构培训出来的学生,也有几个好哥们在培训机构做 ...

  8. jquery总结（来自于一个讲师的总结）

    选择器 基本选择器:id class 标签 eq()查找具体的列表中的元素:$('ul li:eq(n)').eq(n) 层 :div p,div>p 查找:find 选中元素中再查找子元素,p ...

  9. listview相关代码整理

    虽然listview已经慢慢被替代了,  不过还是整理下 , 留作纪念吧 /** * 获取 listview 实际滚动的距离. [ 相对于listview的第一个项目左上角.] * * @return ...

  10. 《java.util.concurrent 包源码阅读》17 信号量 Semaphore

    学过操作系统的朋友都知道信号量,在java.util.concurrent包中也有一个关于信号量的实现:Semaphore. 从代码实现的角度来说,信号量与锁很类似,可以看成是一个有限的共享锁,即只能 ...