Question

I’m having hard time trying to figure out how to auto-save user data in a form when the browser is being closed or user changes the page. The onBeforeUnload event is OK when you want to open a dialog box, but by then it’s too late to save the changes (except if you just block the browser in the onBeforeUnload handler long enough for it to pass the request to the server…but I’d rather not do that).

I am sure some of you have had to deal with the unsaved form problem. What do you do? Do you:

• let users just lose their changes,
• ask them using a modal window if they are sure they did the right thing,
• save individual fields on the fly as they change,
• or do you have some ultimate method to automagically save the data when it’s about to be lost irretrievably?

Answer 1

I like your third option:

• save individual fields on the fly as they change.

I’m having to deal with a similar situation, and that’s what we are doing. The two main things that sell that to me:

1. Improved user experience – the user
   will be impressed by a form that
   does not lose changes. They are
   ‘committed’ once they are validated.
   E.g., he types in a valid email
   address, and it is saved instantly,
   furthermore he is provided some sort
   of feedback for each field that is
   successfully been saved (a green
   tick for example, appears next to
   the field).
2. No more ‘oh crap my browser crashed
   and I lost all my info‘ situations.

Disadvantages: The extra man-hours involved in developing such a solution, and the possibly that it ends up not degrading as nicely as a simpler solution. That said, it is still worth it IMO.