Alert user when they hit the browser back button - with good reason

jquery back-button
Dirty Bird Design picture Dirty Bird Design · Jun 13, 2010 · Viewed 12.1k times · Source

I know this borders on the taboo here, and please don't reply with "you should never do this", etc.

I have a very long form in a wizard, and some users are too used to using the browser's back and forward buttons that they use those instead of the "Back" and "Next" buttons on the form wizard. If they hit the browser's back button, they will lose all of their form data (which is a pain in the ass, since the form is so long).

Is it possible to display an alert that when will have a "take me out of here" button and a "cancel" button, so if they hit cancel it will cancel the function of the back button?

Answer

SLaks picture SLaks · Jun 13, 2010

You should return a message from the onbeforeunload event, like this:

window.onbeforeunload = function() {
    return "Leaving this page will reset the wizard";
};

Note that this event will fire when the user leaves the page for any reason, even after your wizard finishes.
You should set a flag when the wizard finishes and not return a message.

Related questions

JavaScript or jQuery browser back button click detector

Could someone please share experience / code how we can detect the browser back button click (for any type of browsers)? We need to cater all browser that doesn't support HTML5

Read More
How to detect if the user clicked the "back" button

When the user goes history-back-1...how do I detect that? And then, alert "the user clicked back!" Using binds (and jQuery preferably)

Read More
Take User Back to Where They Scrolled to on previous page when clicking Browser Back Button

Is it possible to take a user back to the area of a page where they scrolled down to when pressing the back button in a browser? As in --- pageA is double your screen size (hence you have to …

Read More