10

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?

Ryan Kohn
  • 13,079
  • 14
  • 56
  • 81
Dirty Bird Design
  • 5,333
  • 13
  • 64
  • 121
  • 2
    I'm not sure that this is a "never do this" rule you are breaking. Stackoverflow alerts me when I try to navigate away from a page that I've not saved changes on, and Gmail, and my bank, etc. And I'm always grateful that they have. I've also seen multi-page form data persist on back and forth browser actions, but I'd be content with Sarfraz's alert below. – msw Jun 13 '10 at 21:02

2 Answers2

8

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.

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • window.onbeforeunload = function() { return "Leaving this page will reset the wizard"; }; worked quite nicely. Although I prefer jQuery syntax, I couldn't get Sarfraz Ahmed's code to display a cancel and ok button. Thank you SLaks – Dirty Bird Design Jun 13 '10 at 21:22
  • how do you set a flag when the wizard finishes? definitely need that! – Dirty Bird Design Jun 15 '10 at 13:07
  • It depends. How does your wizard finish? Make a global `var isWizardFinished = false;`, then set it to `true` when the wizard finishes. – SLaks Jun 15 '10 at 13:22
1

You can use the jQuery BBQ plugin to rewrite the functionality of the next/previous buttons to make it more seemless transitioning throughout this "wizard"

http://benalman.com/projects/jquery-bbq-plugin/

Though it is a bit complex to setup, take a look at the examples provided if you're looking for the same functionality.

Chances are you'll probably have to refactor your code to accommodate, and it will take hours.

meder omuraliev
  • 183,342
  • 71
  • 393
  • 434