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 message.

can someone guide me an approach to implement it?

Is there any cross-browser solution available for that?

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 message.

can someone guide me an approach to implement it?

Is there any cross-browser solution available for that?

• javascript
• jquery
• spring-mvc

Share Improve this question Follow edited Dec 26, 2014 at 5:10 Gopal S Rathore 9,99544 gold badges3232 silver badges3939 bronze badges asked Dec 26, 2014 at 4:53 user44858user44858 13511 gold badge22 silver badges99 bronze badges 5

• Did you write the web app, or did someone else write the app and you are using it? – jww Commented Dec 26, 2014 at 4:56
• $(window).on('beforeunload', function(){ return 'Are you sure you want to leave?'; }); – Umesh Sehta Commented Dec 26, 2014 at 4:59
• Execute function before refresh http://stackoverflow./questions/9308336/execute-function-before-refresh – Marlin Commented Dec 26, 2014 at 5:00
• I'm developing web app. I tried onbeforeunload, but it doesn't work on Safari mobile – user44858 Commented Dec 26, 2014 at 6:05
• You can refer to this answer: stackoverflow./a/3968038/1853444 – Nguyen Giang Commented Dec 30, 2014 at 8:17

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 2

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.

How did you manage to disable everything?

For the browser button, cross-patible 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.

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

EDIT: Since you've stated in ments 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() { 

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

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 mon 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./a/3968038/1853444