How To Get "confirm Form Resubmission" When User Trying To Refresh Browser

I have a page that doesn't allow user to refresh the page by clicking browser refresh button or pressing F5. So I want to simulate 'form resubmission' in order to show prompt messa

Solution 1:

To refresh without getting the prompt the page must have been fetched using HTTP GET

Make the form have method="GET" instead of method="POST" (and fix server processes to work with this change as apropriate)

Alternatively cache the post data in a session and redirect to the display page using HTTP code 303 immediately after form submission.

If you want to cause the prompt, make the link that takes the user to the page into a submit button on a POST form. if a user arrives with a GET request have serve them a page having javascript that submits a form converting the request into a POST request.

Solution 2:

How did you manage to disable everything?

For the browser button, cross-compatible per MDN:

window.onbeforeunload = function() {
  return"Data will be lost if you refresh the page. Are you sure?";
};

For the keystroke:

window.addEventListener("keyup", checkForRefresh, false);

var checkForRefresh = function(event) {
   if (event.keyCode == 116) {
        alert("Data will be lost if you refresh the page. Are you sure?");
   }
};

The keystroke may need polyfill for IE8, but they provide it in the docs.

Solution 3:

What you want is to listen for the beforeunload event and throw up a confirm box.

EDIT: Since you've stated in comments on another answer that you need to support Mobile Safari (which doesnt support beforeunload. You could try a library like jquery.AreYouSure

Per the discussion on this page, it supports Mobile Safari, though I havent used it myself

Note that some browsers will ignore the text you provide in the confirm call and show their default text instead. There are more in depth ways to get around that but this will prompt the dialog box.

$(window).on("beforeunload", function() { 

      returnconfirm("Do you really want to close?"); 
});

Solution 4:

From other disccussion:

There are 2 approaches people used to take here:

Method 1: Use AJAX + Redirect This way you post your form in the background using JQuery or something similar to Page2, while the user still sees page1 displayed. Upon successful posting, you redirect the browser to Page2.

Method 2: Post + Redirect to self

This is a common technique on forums. Form on Page1 posts the data to Page2, Page2 processes the data and does what needs to be done, and then it does a HTTP redirect on itself. This way the last "action" the browser remembers is a simple GET on page2, so the form is not being resubmitted upon F5.

You can refer this answer: https://stackoverflow.com/a/3968038/1853444