一个JavaScript防止表单重复提交的实例_JavaScript

一个JavaScript防止表单重复提交的实例

2021-04-05 18:03JS教程网 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>