[web] JavaScript: Preventing user from leaving page
Author
I need to be able to stop a user from leaving a particular page (via a confirmation dialog - this is to prevent them from switching page without saving a form first).
I can catch the page after it has been unloaded via the onunload event, but by that point the page has been unloaded so I don't have the form to save any more. I hear mention of onbeforeunload, but that event doesn't get fired for me.
Is what I aim to do possible?
Save the form using javascript as its modified (ie. store it in a cookie as its being typed, remove it when its sucessfully submitted, and get it back on page load)
Then make the page reload if it wasn't submitted right.
Then make the page reload if it wasn't submitted right.
Just a hint, don't "force" a user to do anything, nothing will iritate your users more then not being able to leave if they want to. If I am in the middle of filling out a form and realize I need to go do something else, and your page stopped me from leaving, I would NEVER return. You can save the data as the user fills out the form and that way you will not loose the information but please do not trap the user.
theTroll
theTroll
Quote:Original post by TheTroll
Just a hint, don't "force" a user to do anything, nothing will iritate your users more then not being able to leave if they want to. If I am in the middle of filling out a form and realize I need to go do something else, and your page stopped me from leaving, I would NEVER return. You can save the data as the user fills out the form and that way you will not loose the information but please do not trap the user.
theTroll
^^^ What he said.
I don't think he's actually trapping them. Just asking them "Are you sure you want to leave?". That was my understanding at least.
I've not discovered a way in order to do this. It seems like something a web browser should never let a script do. Think of a popup which never allows the user to close it.
Author
What I mean is a confirmation dialog - 'You have edited some information on this page without saving' - with an OK button to return to editing the page and a Cancel button to just skip onto whichever page you were moving to.
I've managed to get 'onbeforeunload' working in IE with the aforementioned dialog, but I'd really rather have a better cross-browser solution. I have:
formSave is a function which goes through every 'control' element on any form with the 'form_save' style attached to it, and hooks in the onchange/onclick events required to set FormNeedsSaving to true (dirtying).
I've managed to get 'onbeforeunload' working in IE with the aforementioned dialog, but I'd really rather have a better cross-browser solution. I have:
var FormNeedsSaving = false;if (window.attachEvent) window.attachEvent('onload', formSave);window.onbeforeunload = checkFormSave;function checkFormSave() { if (FormNeedsSaving) return "You are leaving the page without saving changes.";}formSave is a function which goes through every 'control' element on any form with the 'form_save' style attached to it, and hooks in the onchange/onclick events required to set FormNeedsSaving to true (dirtying).
If they are leaving the page via links on your site, here are some options:
1. Don't provide any links for them to leave the page via
2. Put onclick events on those links to ask them "are you sure" or similar. If you return false from an onclick event handler on an anchor, it will not follow the link.
Mark
1. Don't provide any links for them to leave the page via
2. Put onclick events on those links to ask them "are you sure" or similar. If you return false from an onclick event handler on an anchor, it will not follow the link.
Mark
I'm pretty sure that the windows has an onclose event that can prevent the window from being closed. How do you feel about popups?
Author
Quote:Original post by markrI'll probably have to be that, in the end. Thanks, all!
2. Put onclick events on those links to ask them "are you sure" or similar. If you return false from an onclick event handler on an anchor, it will not follow the link.
This topic is closed to new replies.
Advertisement
Popular Topics
Advertisement
