JQuery

Check For Any Unsaved Changes In A Page

In this post we will discuss how we can check for any unsaved changes in the page by using JQuery. Normally this may need to be implemented in an application where we need to give any alert if any user try to reload the page when there any unsaved changes in the page. I hope you will like this.

Background

I was creating a page where I have some text boxes, so I wanted to give an alert if user try to get away from the page without saving the data entered.

Please read this article in my blog here.

Using the code

First of all we will create a page and an html table.

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Check for any unsaved changes in page</title>  
  5.         <script src="jquery-2.0.2.min.js"></script>  
  6.     </head>  
  7.     <body>  
  8.         <table class="table" border="1" style="width: 40%">  
  9.             <tr>  
  10.                 <td>Sibi</td>  
  11.                 <td>Ajay</td>  
  12.                 <td>  
  13.                     <input class="text" type="text" />  
  14.                 </td>  
  15.             </tr>  
  16.             <tr>  
  17.                 <td>Ansu</td>  
  18.                 <td>Akhil</td>  
  19.                 <td>  
  20.                     <input class="text" type="text" />  
  21.                 </td>  
  22.             </tr>  
  23.             <tr>  
  24.                 <td>Shanto</td>  
  25.                 <td>Libin</td>  
  26.                 <td>  
  27.                     <input class="text" type="text" />  
  28.                 </td>  
  29.             </tr>  
  30.         </table>  
  31.     </body>  
  32. </html>  

Now if you run your page, you can see the table.

Check for any unsaved changes in page

Check for any unsaved changes in page

No we will create a bool variable which will be true when there is an unsaved data.

  1. var unsaved = false;  

What next? We will add call to an existing function when user reloads the page. Sounds good?

  1. window.onbeforeunload = unloadPage;  

As you can see we are calling a function unloadPage, preceding is the function definition.

  1. function unloadPage() {  
  2. if (unsaved) {  
  3. return "You have unsaved changes on this page.";  
  4. }  
  5. }  

Now please run your page and type anything in the text box given, then reload your page.

You will get an alert of "You have unsaved changes on this page." Shall we check that?

Check for any unsaved changes in page

Check for any unsaved changes in page

We have done it finally.

Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Check for any unsaved changes in page</title>  
  5.         <script src="jquery-2.0.2.min.js"></script>  
  6.         <script>  
  7. var unsaved = false;  
  8. $(document).on('change', '.table .text', function () {  
  9. unsaved = true;  
  10. });  
  11. $(document).on('mouseover', '.table td', function () {  
  12. $(this).attr('title', $(this).text());  
  13. });  
  14. function unloadPage() {  
  15. if (unsaved) {  
  16. return "You have unsaved changes on this page.";  
  17. }  
  18. }  
  19. window.onbeforeunload = unloadPage;  
  20. </script>  
  21.     </head>  
  22.     <body>  
  23.         <table class="table" border="1" style="width: 40%">  
  24.             <tr>  
  25.                 <td>Sibi</td>  
  26.                 <td>Ajay</td>  
  27.                 <td>  
  28.                     <input class="text" type="text" />  
  29.                 </td>  
  30.             </tr>  
  31.             <tr>  
  32.                 <td>Ansu</td>  
  33.                 <td>Akhil</td>  
  34.                 <td>  
  35.                     <input class="text" type="text" />  
  36.                 </td>  
  37.             </tr>  
  38.             <tr>  
  39.                 <td>Shanto</td>  
  40.                 <td>Libin</td>  
  41.                 <td>  
  42.                     <input class="text" type="text" />  
  43.                 </td>  
  44.             </tr>  
  45.         </table>  
  46.     </body>  
  47. </html>  

Conclusion

Did I miss anything that you may think which is needed? Have you ever faced this requirement in your programming life? Does this article helps you in anyway? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog is not a blog without comments, but do try to stay on topic. If you have a question, then please mention it in the comments section.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs