Prevent Back Button from Showing Post Confirmation Alert

Prevent Back button from showing POST confirmation alert

One way round it is to redirect the POST to a page which redirects to a GET - see Post/Redirect/Get on wikipedia.

Say your POST is 4K of form data. Presumably your server does something with that data rather than just displaying it once and throwing it away, such as saving it in a database. Keep doing that, or if it's a huge search form create a temporary copy of it in a database that gets purged after a few days or on a LRU basis when a space limit is used. Now create a representation of the data which can be accessed using GET. If it's temporary, generate an ID for it and use that as the URL; if it's a permanent set of data it probably has an ID or something that can be used for the URL. At the worst case, an algorithm like tiny url uses can collapse a big URL to a much smaller one. Redirect the POST to GET the representation of the data.

---

As a historical note, this technique was established practice in 1995.

Clicking the browser back button after getting the confirmation page

Step 1:
On the form submission page, initially set the form submission value to false.

sessionStorage.setItem('form-submit', false)

Step 2:
And when submitting the form in previous page, check:

function submitEvent() {
    formSubmitted = sessionStorage.getItem('form-submit')

    if (!formSubmitted){
        // Write your code here
    }
}

Step 3:
On confirmation.html page, you can store a submission value in sessionStorage.

sessionStorage.setItem('form-submit', true)

Angular 2 - Prevent back button while REST API call is under processing?

You can set a property in your service, something like isDisabled = true, and create a directive that you can use anywhere, disabling your button and any other actions you might need.

Confirm browser back button else stay on page

You can't control the confirmation dialog button text, it's a hard coded feature of confirm() and is whatever the browser has...not much you can do about it.

For the actual display you can use window.onbeforeunload, but it won't be specific to the back button, any action leaving the page will trigger this, for example:

window.onbeforeunload = function() {
  return "Are you sure you wish to leave this delightful page?";
}

---

Related Topics