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

2024-05-06 16:09:58

字体：大中小

来源：转载

供稿：网友

防止重复表单提交的方法有很多，本文使用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>

上一篇：jquery中post方法用法实例

下一篇：javascript Deferred和递归次数限制实例

学习交流

硬盘分区如何设置准确的分区空间

硬盘分区如何设置准确的分区空间...

热门图片

猜你喜欢的新闻

猜你喜欢的关注