You need something server-side to handle this. Commonly people use a server-side language (PHP, JSP etc) to handle the post and then redirect to another page. This is a Post/Redirect/Get pattern (PRG) .
Simply put:
The user submits (POSTs) the form.
The POST is handled by your (server-side) code that does something with the request data (eg: populates a database) and then REDIRECTs to a new page (eg: thanks.php) or the same page.
The page optionally GETs the data (from the db or passed parameter etc) to display to the user.
If the user refreshes the browser they are merely refreshing the thank-you page/view NOT resubmitting anything.
JavaScript Alternative..?
Without something server-side (recommended) you are going to have to use JavaScript.
I would not recommend this but if you have no better options you could use JS to set a cookie when the form is submitted unless the cookie already exists - in which case don't submit at all.
Something like:
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>
Update!
It occurred to me that restricting the form submission if a cookie exists is a bad solution as it does not stop the refreshing of the browser but just stops the user using the form more than once. Sorry ;)
So how to the stop the form being resubmitted if the user refreshes the page?
To reiterate: use something server-side. If you must have a JS solution you could submit the form via AJAX or implement the following simple PRG inspired solution to forward/redirect the page if a certain parameter has been passed (indicating that the form was submitted):
<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>