<!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. 使用Lock锁生产者消费者模式

    package com.java.concurrent; import java.util.concurrent.locks.Condition; import java.util.concurren ...

  2. L2-2. 链表去重

    L2-2. 链表去重 时间限制300 ms内存限制65536 kB代码长度限制8000 B判题程序Standard作者陈越给定一个带整数键值的单链表L,本题要求你编写程序,删除那些键值的绝对值有重复的 ...

  3. 验证Oracle处理速度

    (这是2009年写的东西了,在网上看到有人对数据库批量操作的'速度'比较关注,于是就把这篇老文章整理了一下) 一.环境及前提 在244上(一台稍好一些的机器,做了RAID,机械硬盘,Raid几忘了), ...

  4. Java多线程由易到难

    线程可以驱动任务,因此你需要一种描述任务的方式,这可以由Runnable接口来提供.要想定义任务,只需实现Runnable接口并编写run方法,使得该任务可以执行你的命令. public class ...

  5. web前端vertical-align的作用及对象详解

    很多程序员知道web前端技术里的vertical-align是什么意思,但是对于vertical-align到底以什么为对齐标准却一知半解,今天我们就来说说web前端vertical-align. 1 ...

  6. [转载] hessian学习

    转载自http://www.cnblogs.com/yjmyzz/p/hessian-helloworld.html hessian是一个采用二进制格式传输的服务框架,相对传统soap web ser ...

  7. link和import导入外部样式的区别

    1.结构 link语法结构 <link rel="stylesheet" href="CSSurl" type="text/css" ...

  8. javascript第五章--函数表达式

    ① 递归 ② 闭包 ③ 模仿块级作用域 ④ 私有变量

  9. SQL Server 初识游标

    ---恢复内容开始--- 游标:游标是一种能从包含多个数据的结果集每次提取一条的机制 游标的特点是: 检索得到的数据集更加灵活 可有针对性的对数据进行操作 拥有对数据进行删除和更新的能力 为何使用游标 ...

  10. Maven创建父子工程(简单、完整)

    Eclipse创建Maven父子工程(书中有的叫聚合工程,因为看了网上很多教程,实际操作总会有这样那样的小问题,有时候包结构还不对,创建成功后索性就自己写一篇帮助小白,有不对请指教) 1 file-n ...