How can I know that the user has opted to not leave the page to prevent losing form changes?

Question

There are many examples here and all over the webs showing how to warn the user that the changes they have made will be lost if they leave the current page. I have implemented a nice and simple solution on my own project. But this is not enough for all instances of the problem.

In my case the user will most likely be attempting to leave the page by selecting one of three dropdowns. When they are warned and elect to not leave the page, the selected dropdown still displays their new choice instead of the one that brought them to this page. Consequently they may be misled as to the origin of the page contents. This is not acceptable. So I need to reset the dropdown when they opt to remain on the page.

Of course, browser developers have not given us access to the result of the onbeforeunload event, so we can't know directly that the user has chosen to stay. They are obviously dolts and should be spanked for this oversight ;-)

I have seen discussions about setting timers and checking to see if we are still here after the onbeforeunload window departs but have not been able to get this to work. Does anyone have a real solution to this aspect of the scenario?

Update

Please pardon me if this sounds snippy but I don't think you read my question. I am thoroughly familiar with how this works but it does not "handle it for me". The problem isn't to just stop the user from a mistaken navigation. The problem is the selected dropdown still displays the user's new choice which is part of the page's identification system, if you will, that tells the user the origin of the displayed data.

The page loads with the first option in each of three selects. The user must be able to rely on the data which is displayed being related to the displayed options. However, when the user makes changes to the data and then selects another option in one of the selects (which calls for new data from the server on change), then cancels the navigation, the newly selected option is still displayed while the data is not changed, erroneously declaring the displayed data to be from those three choices, which is not true. THAT is not acceptable. Is that clearer?

I need to reset the select to the previous option when the user cancels the navigation. Of course this is all driven by the customer's requirements, not mine, so what is one to do? I appreciate your help but I hope you see the problem better now.

Answer 1

You do not need to access the result of onbeforeunload. All you have to do is implement it in your code. If the user decides to stay on the page, all of the information should stay available.

Javascript:

window.onbeforeunload = function(){
  return 'Are you sure you want to leave?';
};

JQuery:

$(window).bind('beforeunload', function(){
  return 'Are you sure you want to leave?';
});

This will give you a prompt asking if you would like to leave. The user can choose whether or not to stay, and it is all handled by that function.

EDIT: I did, in fact, misread the question. If I am understanding your correctly, you would like to reset the value of the dropdown if the user clicks "cancel" on the dialog that appears asking if they would like to leave the page. I have been researching for a few hours trying to find a suitable answer but as of yet I have been unsuccessful. The fact is that Window.onbeforeunload() cannot contain a custom function that would access the returnValue and manipulate your dropdown accordingly. onbeforeunload() is designed only to display a string to the user and two buttons. There is nowhere inside onbeforeunload that you can create or access a custom function. Also, as far as I know, there is no other way (with the exception of the deprecated "onunload" function) to capture a page-close event and provide the user with a choice to stay or leave. That is definitely something that will need to be fixed in the next version of Javascript.