一个JavaScript防止表单重复提交的实例_javascript技巧
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>防止重复表单提交</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> 
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
如何实现PHP表单提交后的页面跳转
Aug 12, 2023 am 11:30 AM
如何实现PHP表单提交后的页面跳转【简介】在Web开发中，表单的提交是一项常见的功能需求。当用户填写完表单并点击提交按钮后，通常需要将表单数据发送至服务器进行处理，并在处理完后将用户重定向至另一个页面。本文将介绍如何使用PHP来实现表单提交后的页面跳转。【步骤一：HTML表单】首先，我们需要在HTML页面中编写一个包含表单的页面，以便用户填写需要提交的数据。
如何处理PHP表单中的用户权限管理
Aug 10, 2023 pm 01:06 PM
如何处理PHP表单中的用户权限管理随着Web应用程序的不断发展，用户权限管理是一个重要的功能之一。用户权限管理可以控制用户在应用程序中的操作权限，保证数据的安全性和合法性。在PHP表单中，用户权限管理可以通过一些简单的代码来实现。本文将介绍如何处理PHP表单中的用户权限管理，并给出相应的代码示例。一、用户角色的定义和管理首先，对用户角色进行定义和管理是用户权
如何使用 JavaScript 实现表单的输入框内容实时校验功能？
Oct 18, 2023 am 08:47 AM
如何使用JavaScript实现表单的输入框内容实时校验功能？在很多网页应用中，表单是用户与系统之间最常用的交互方式。然而，用户输入的内容往往需要进行有效性校验，以确保数据的准确性和完整性。在这篇文章中，我们将学习如何使用JavaScript实现表单的输入框内容实时校验功能，并提供具体的代码示例。创建表单首先，我们需要在HTML中创建一个简单的表
如何使用 JavaScript 实现表单的输入框内容自动提示功能？
Oct 20, 2023 pm 04:01 PM
如何使用JavaScript实现表单的输入框内容自动提示功能？简介：表单的输入框内容自动提示功能在网页应用中非常常见，它可以帮助用户快速输入正确的内容。本文将介绍如何使用JavaScript实现这一功能，并提供具体的代码示例。创建HTML结构首先，我们需要创建一个包含输入框和自动提示列表的HTML结构。可以使用以下代码：<!DOCTYP
MySQL事务处理：自动提交与手动提交的区别
Mar 16, 2024 am 11:33 AM
MySQL事务处理：自动提交与手动提交的区别在MySQL数据库中，事务是一组SQL语句的集合，要么全部执行成功，要么全部执行失败，保证了数据的一致性和完整性。在MySQL中，事务可以分为自动提交和手动提交，其区别在于事务提交的时机以及对事务的控制范围。下面将详细介绍自动提交和手动提交的区别，并给出具体的代码示例来说明。一、自动提交在MySQL中，如果没有显示
如何使用HTML、CSS和jQuery实现表单自动保存的高级功能
Oct 28, 2023 am 08:20 AM
如何使用HTML、CSS和jQuery实现表单自动保存的高级功能在现代网页应用中，表单是非常常见的元素之一。当用户在输入表单数据时，如何能够实现自动保存的功能，不仅可以提高用户的使用体验，也能确保数据的安全性。本文将介绍如何使用HTML、CSS和jQuery来实现表单的自动保存功能，并附上具体的代码示例。一、HTML表单的结构搭建我们首先来建立一个简单的HT
PHP表单处理：表单数据查询与筛选
Aug 07, 2023 pm 06:17 PM
PHP表单处理：表单数据查询与筛选引言在Web开发中，表单是一种重要的交互方式，用户可以通过表单向服务器提交数据并进行进一步的处理。本文将介绍如何使用PHP处理表单数据的查询与筛选功能。表单的设计与提交首先，我们需要设计一个包含查询与筛选功能的表单。常见的表单元素包括输入框、下拉列表、单选框、复选框等，根据具体需求进行设计。用户在提交表单时，会将数据以POS
Laravel表单类使用技巧：提高效率的方法
Mar 11, 2024 pm 12:51 PM
在编写网站或应用程序时，表单是不可或缺的一部分。Laravel作为一款流行的PHP框架，提供了丰富而强大的表单类，使得表单处理变得更加简单和高效。本文将介绍一些Laravel表单类的使用技巧，帮助你提高开发效率。下面通过具体的代码示例来详细讲解。创建表单要在Laravel中创建表单，首先需要在视图中编写相应的HTML表单。在处理表单时，可以使用Laravel
