每当用户提交我的表单然后刷新页面时，它都会重新提交表单。
这是我精简的 HTML：
<form action="" method="post" id="myform">
<input type="text" name="title">
<input type="submit" value="Submit" name="subnewtopic" />
</form>
如何防止表单在刷新时重新提交？
【问题讨论】：
你需要一些服务器端的东西来处理这个。通常人们使用服务器端语言（PHP、JSP 等）来处理帖子，然后重定向到另一个页面。这是Post/Redirect/Get pattern (PRG)。
简单地说：
用户提交（POST）表单。
POST 由您的（服务器端）代码处理，该代码对请求数据执行某些操作（例如：填充数据库），然后重定向到新页面（例如：thanks.php）或同一页面.
页面可选地获取数据（从数据库或传递的参数等）显示给用户。
如果用户刷新浏览器，他们只是刷新感谢页面/视图而不是重新提交任何内容。
如果没有服务器端的东西（推荐），您将不得不使用 JavaScript。
我不建议这样做，但如果您没有更好的选择，您可以在提交表单时使用 JS 设置 cookie，除非 cookie 已经存在 - 在这种情况下不要完全提交。
类似：
document.forms["myform"].onsubmit = function(){
//See: https://developer.mozilla.org/en-US/docs/Web/API/document.cookie
if (document.cookie.replace(/(?:(?:^|.*;\s*)submitted\s*\=\s*([^;]*).*$)|^.*$/, "$1") !== "true") {
document.cookie = "submitted=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
return true;
} else {
//cookie exists, dont submit
return false;
}
}<form name="myform" method="post">
<input type="submit" />
</form>在我看来，如果存在 cookie，则限制表单提交是一个糟糕的解决方案，因为它不会停止浏览器的刷新，而只会阻止用户多次使用表单。对不起;)
如果用户刷新页面，如何阻止表单重新提交？
重申：使用服务器端的东西。如果您必须有一个 JS 解决方案，您可以通过 AJAX 提交表单或实施以下简单的 PRG 启发解决方案来转发/重定向页面，如果某个参数已传递（表示表单已提交）：
<div id="formWrapper">
<p>Please submit the form</p>
<form>
<input type="submit" name="submitted" value="submit" />
</form>
</div>
<script>
/* method to fetch params from the query string */
function getQueryParams() {
var qs = document.location.search;
qs = qs.split("+").join(" ");
var params = {},
tokens,
rx = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = rx.exec(qs)) {
params[decodeURIComponent(tokens[1])]
= decodeURIComponent(tokens[2]);
}
return params;
};
//get the params:
var params = getQueryParams();
//test if our 'submitted' param has been passed:
if(params.submitted){
//if it has, then reload the page without params
location = location.protocol+'//'+location.host+location.pathname+"?thanks=true"
}
//test if our 'thanks' param has been passed:
if(params.thanks){
//if it has been passed we can show the thanks message in place of the form...
document.getElementById("formWrapper").innerHTML = "Thanks. Your form was submitted and I did something with it. You can refresh this page if you like.";
}
</script>
【讨论】：
//Check this out mate!!
//This is working !!!
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("form").submit(function(){
event.preventDefault();
});
});
</script>
</head>
<body>
<form action="">
First name:
<input type="text" name="FirstName" value="Mickey"><br>
Last name:
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
【讨论】：
event 作为参数，因此这在 Firefox 中不起作用。
$("form").submit(function(){ 更改为 $("form").submit(function(event){