<!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遍历 - 过滤

    缩写搜索元素的范围 三个最基本的过滤方法是:first(), last() 和 eq(),它们允许您基于其在一组元素中的位置来选择一个特定的元素. 其他过滤方法,比如 filter() 和 not() ...

  2. backface-visibility 3D修复

    backface-visibility  是作用于 3D transform 时候   默认是   backface-visibility: hidden;   当一个元素3D变换的时候,会立即看到背 ...

  3. Problem E: 动物爱好者

    Problem E: 动物爱好者 Time Limit: 1 Sec  Memory Limit: 128 MBSubmit: 882  Solved: 699[Submit][Status][Web ...

  4. [译]ASP.NET Core 2.0 系列文章目录

    基础篇 [译]ASP.NET Core 2.0 中间件 [译]ASP.NET Core 2.0 带初始参数的中间件 [译]ASP.NET Core 2.0 依赖注入 [译]ASP.NET Core 2 ...

  5. 虚拟软件vmware安装

    什么是虚拟软件: 虚拟原件是一个可以使你在一台机器上同时运行二个或更多Windows.LINUX等系统.它可以模拟一个标准PC环境.这个环境和真实的计算机一样,都有芯片组.CPU.内存.显卡.声卡.网 ...

  6. java 通过eclipse编辑器用mysql尝试 连接数据库

    注:本人学的是Oracle,用mysql连接数据库是一次尝试. 一.下载JDBC mysql驱动,导入jar包     我自己下载的是connector-java-6.0.6.jar,如下图所示,JD ...

  7. oracle存储过程统计用户各表记录数

    declare v_tName varchar(50); v_sqlanalyze varchar(500); v_num number; v_sql varchar(500); cursor c1  ...

  8. 基于树莓派的智能家居项目的设想与实现 Hestia

    注:本人内容的准确性仅限于笔者写该篇文章时的情况,不保证后续与实际项目代码一致.实时内容还请关注Github项目托管页面:https://github.com/GenialX/hestia-serve ...

  9. LKD: Chapter 8 Bottom Halves and Deferring Work

    In 2.6.x, there are 3 mechanisms for implementing a bottom half: softirqs, tasklets and work queues. ...

  10. 解决thymeleaf layout布局不生效

    今天使用thymeleaf layout布局时总是不生效,特此把解决问题的步骤和几个关键点记录下来备忘. 一.检查依赖 1.thymeleaf必备maven依赖: <dependency> ...