Alert for unsaved changes in form

Question

I want to write Jquery code in master file, so that if there if user changes page and there is any unsaved changes user should get alert. I got one answer from this: link

However in most solution I will have to write code on all pages. I want it to write only at one place so that everybody dont have to worry to write it in their modules. My code is like:

<script type="text/javascript">     var isChange;     $(document).ready(function () {         $("input[type='text']").change(function () {             isChange = true;         })     });     $(window).unload(function () {         if (isChange) {             alert('Handler for .unload() called.');         }     });  </script> 

But everytime i make changes in text boxes .change() event is not firing.

What can be wrong in the code?

EDIT: I changed .change() to .click and it is fired. i am using jquery 1.4.1..is it because of jquery version that change() is not working?

Answer 1

This is what i am using, Put all this code in a separate JS file and load it in your header file so you will not need to copy this again and again:

var unsaved = false;  $(":input").change(function(){ //triggers change in all input fields including text type     unsaved = true; });  function unloadPage(){      if(unsaved){         return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";     } }  window.onbeforeunload = unloadPage; 

EDIT for $ not found:

This error can only be caused by one of three things:

1. Your JavaScript file is not being properly loaded into your page
2. You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $ variable.
3. You have JavaScript running before the page is fully loaded, and as such, before jQuery is fully loaded.

Make sure all JS code is being placed in this:

$(document).ready(function () {   //place above code here }); 

Edit for a Save/Send/Submit Button Exception

$('#save').click(function() {     unsaved = false; }); 

Edit to work with dynamic inputs

// Another way to bind the event $(window).bind('beforeunload', function() {     if(unsaved){         return "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";     } });  // Monitor dynamic inputs $(document).on('change', ':input', function(){ //triggers change in all input fields including text type     unsaved = true; }); 

Add the above code in your alert_unsaved_changes.js file.

Hope this helps.

Answer 2

A version that use serialization of the form :

Execute this code, when dom ready :

// Store form state at page load var initial_form_state = $('#myform').serialize();  // Store form state after form submit $('#myform').submit(function(){   initial_form_state = $('#myform').serialize(); });  // Check form changes before leaving the page and warn user if needed $(window).bind('beforeunload', function(e) {   var form_state = $('#myform').serialize();   if(initial_form_state != form_state){     var message = "You have unsaved changes on this page. Do you want to leave this page and discard your changes or stay on this page?";     e.returnValue = message; // Cross-browser compatibility (src: MDN)     return message;   } }); 

If the user change a field then manually rollback, no warn is displayed