Question

每当用户提交我的表单然后刷新页面时，它都会重新提交表单。

这是我的精简HTML：

   <form action="" method="post" id="myform">
        <input type="text" name="title">
        <input type="submit" value="Submit" name="subnewtopic" /> 
   </form>

如何防止表单在刷新时重新提交？

Answer 1

你需要服务器端来处理这个问题。通常人们使用服务器端语言（PHP，JSP等）来处理帖子，然后重定向到另一个页面。这是Post/Redirect/Get pattern（PRG）。

简单地说：

用户提交（POST）表单。
POST由您的（服务器端）代码处理，该代码对请求数据执行某些操作（例如：填充数据库），然后REDIRECT到新页面（例如：thanks.php）或同一页面
页面可选地获取数据（来自db或传递的参数等）以显示给用户。

如果用户刷新浏览器，他们只是刷新感谢页面/视图而不是重新提交任何内容。

JavaScript替代..？

如果没有服务器端（推荐），您将不得不使用JavaScript。

我不推荐这个，但是如果你没有更好的选择，你可以使用JS在提交表单时设置一个cookie，除非cookie已经存在 - 在这种情况下不要＃39完全提交。

类似：

＆＃13;
＆＃13;
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; } }
＆＃13;
<form name="myform" method="post"> <input type="submit" /> </form>
＆＃13;
＆＃13;
＆＃13;

更新！

我想到，如果存在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>

Answer 2

//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>

防止表单在刷新时提交

2 个答案:

JavaScript替代..？

更新！