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