In web apps it’s helpful to warn the user if they attempt to navigate away after making changes without hitting save. But the tricky part is, how do you track when they’ve made changes? This is actually pretty trivial to pull off with a little bit of jQuery.
- Leverage the “on” function to attach an event handler to any change, keyup, or keydown events for any inputs, textareas, or selects:
- $('#body-content').on('change keyup keydown', 'input, textarea, select', function (e) {
- $(this).addClass('changed-input');
- });
Notice that whenever one of these events occurs, the class “changed-input” is assigned to the input. This comes in handy for checking if the form is “dirty” below. Also, keep in mind that the example attaches to an element with an id of body-content, but as usual with jQuery’s “on” function, for optimal performance you should choose the most specific selector possible.
- Attach to the “beforeunload” event and check if the form is dirty by seeing if any elements with a class of “changed-input” exist.
- $(window).on('beforeunload', function () {
- if ($('.changed-input').length) {
- return 'You haven\'t saved your changes.';
- }
- });
When the user tries to navigate away or hit refresh, they’ll be greeted with a friendly reminder that they haven’t saved changes. The exact look and wording differs based on browser, but the string returned is displayed as part of the message. Here’s an example using the above message with Chrome.
Sure beats the angry phone call and superfluous tickets claiming the application didn’t save!
Thanks! That’s a nice piece of code. I’ll be adding that to my current project. Lovin’ the JQuery…
thanks, this is very helpful for me 🙂
Does it work if we type something and revert the changes using backspace..?
It would still warn the user of unsaved changes using the implementation above. However, you could always compare to the initial value of the text field if you want to avoid false notifications in edge cases like this.
Any ideas how to stop alert box appear when hitting save button?
One approach is to simply remove the “dirty” class (which is being used to mark fields as dirty) from all inputs when save is clicked.
Hi,
Does we have any choice to know if user clicks on the “stay on the page” or ” leave the page” buttons.
As i have one requirement to find these.
Thanks for your help.
If they choose to leave the page there’s nothing you can do. The browser will let them move on. Also note that some mobile browsers ignore the response to onbeforeunload: https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload
Thanks for your Update , but in my case i need to do some thing if user clicks on the Stay on the page button.
I am waiting for responce from past one week.
Please help us 🙂
The above ‘Warn Users of Unsaved Changes with jQuery’ it was very usefull for my project. But i have one problem in this concept. when i click the save button the warning ‘message are you sure want to leave this page.’ will show. how can i resolve without showing he alert message. pld give me a solution. thank u…………
Thank you very much for this article.
I am completely new to MVC could you please show me where to put the script and how to use it.
And if you have small example of doing this i will be very thankful.
Again thank you very much please help me because i need this logic but i do not how to implement it.
This code will not work if i changed the value temporary and back to the same value. Still it show the confirm dialog. Can any one tell me how to do that
To fix the Same button error message, just add $(‘.changed-input’).removeClass(‘changed-input’); to your submit procedure. If you don’t have one, attach it to your Save button.