Warn Users of Unsaved Changes with jQuery

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.

  1. Leverage the “on” function to attach an event handler to any change, keyup, or keydown events for any inputs, textareas, or selects:
    1. $('#body-content').on('change keyup keydown', 'input, textarea, select', function (e) {
    2.     $(this).addClass('changed-input');
    3. });

    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.

  2. Attach to the “beforeunload” event and check if the form is dirty by seeing if any elements with a class of “changed-input” exist.
    1. $(window).on('beforeunload', function () {
    2.     if ($('.changed-input').length) {
    3.         return 'You haven\'t saved your changes.';
    4.     }
    5. });

    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.
    onbeforeunload example

Sure beats the angry phone call and superfluous tickets claiming the application didn’t save!

Subscribe to Email Updates (No spam. Just new posts.)

16 thoughts on “Warn Users of Unsaved Changes with jQuery

    • 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.

    • 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.

  1. 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.

  2. 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…………

  3. 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.

  4. 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

  5. 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.

  6. Pingback: Code snippet of the day – Alert users to changes | aaroncoates.com

  7. Pingback: Code snippet of the day – Alert users to changes – aaroncoates.com