Using the JavaScript 'window.onbeforeunload' Event

Using the JavaScript 'window.onbeforeunload' Event

When creating data entry forms in ASP .NET, the JavaScript onbeforeonload event can add a huge improvement to the end user experience. This nifty little event is fired before a page is unloaded (duh) and will keep users from navigating off of a page (and even from closing their browser) when they have unsaved changes on a data entry form.

The onbeforeunload event behaves a bit oddly for an event. Basically in your event handler function, if you return anything, the event will pop up a message box with whatever you returned sandwiched between “Are you sure you want to navigate away from this page?” and “Press OK to continue, or Cancel to stay on the current page.” Here is an example:

If, however, your function doesn’t return anything, no warning will show up (but the page is removed from cached memory so you can’t navigate back to it.) This provides a very nice tool for alerting users. All your function needs to do is to check if data has been edited and if so, return an appropriate string. The window prompt and warning will then be handled for you by the onbeforeunload event.

The function is extremely easy to use. In the “<script type="text/javascript">“ section at the end of an ASPX page you just need to assign a function to the “window.onbeforeunload” event. Below is a complete snippet (the JavaScript variable bEdited is set outside of this snippet to true if data on the form has been edited.)

 var bEdited = new Boolean();
 function UnLoadWindow() {
	 if (!(bEdited)) {
	return 'DMC strongly recommends NOT closing this window yet.';
 window.onbeforeunload = UnLoadWindow;

Learn more about DMC's software and web development services.


# Peter
In my project this will only alert all exit of page no matter what or not alert user at all. Can you help me fix this?
this is not working on my project.
# jude
link it with java script
Hi Danny,
i am facing an issue, I have multiple buttons on my page once i cancel this popup button stops working.
# mikey
I have no code snippet to post here as it would be too long, but basically if it helps what I did to get around djzoc's question is that all the links on the website that I maintain I have filtered through a javascript function which redirects them based on their name. at the loading of the main.js file I have a variable which I set to 1 and when they click on a link that filters through that javascript function it sets that variable to zero, and only if that variable is nonzero does the window.beforeunload function get triggered. Therefore only when navigating off or closing the window.
hello there, nice script i really search this, but how i can setap this to work just if the user close the browser/tab not if he click some another link on my page
aqeel ansari
Thanks a lot !!
It really help me.
Danny Budzinski
# Danny Budzinski
Try putting this into your UnLoadWindow() function:

window.location = ""

I haven't tested if that works in the onbeforeunload event, but it is worth a shot.

# suzanne

How can i make that code redirect to a webpage?


Post a comment

Name (required)

Email (required)

Enter the code shown above:

Related Blog Posts