Page Dirty Handler for Navigating away

User has filled out the form and is navigating away without saving. I want a custom alert to display, warning them and asking if they wish to proceed or save.

I searched on here, but the result was from 2007. Gotta be something more modern out there. I've seen them.

I was told that this can only be done using the browser's built in alerts, but I'm sure I've seen custom, nice looking alerts.

Any suggestions where I can find something?

thanks!
LVL 2
Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Chinmay PatelChief Technology NinjaCommented:
Hi Starr,

This can be bit tricky,  have you seen the https://www.w3schools.com/jsref/event_onbeforeunload.asp.

AFAIK you can display a custom message only in IE. Other browsers have stopped supporting it.

Regards,
Chinmay.

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
There are several parts to this process.

1) Attach an event to either every form on the page, to fire on every keystroke.

2) Every keystroke (#1 function fires) increments a global dirty flag, so if this flag != 0, some data has been typed.

3) Use something like https://api.jquery.com/unload/ to run a simple bit of code to check the dirty flag at page exit/unload time. If the dirty flag != 0, then prompt user to continue or cancel.

Use JQuery for this to abstract away any browser differences, so you only have a single function to maintain for all browsers, very old + new ones in the future. Just keep JQuery up to date.
lenamtlCommented:
Hi,

the best to my opinion is Dirrty

First I started with this one https://github.com/rubentd/dirrty
then I implement some features of this one
( this fork is more active and more complete )
https://github.com/simontaite/jquery.dirty

I would start with https://github.com/simontaite/jquery.dirty as it cover a lot.

Unfortunately about the alert for security reason it's no longer possible to customize onbeforunload event.
So you will get the alert text and model from the browser.

There are other method but this is not reliable, I have tried a tons since 2 years as my project need that feature.
The most important is that the user get the alert when required.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
Thanks all!
David FavorLinux/LXD/WordPress/Hosting SavantCommented:
You're welcome!

Good luck!
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
ASP.NET

From novice to tech pro — start learning today.