Question

130

Alert for unsaved changes in form

rated 0 times [ 137] [ 7] / answers: 1 / hits: 98177 / 12 Years ago, tue, august 7, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ednakarolinal

Add To Favorites

Follow

Total Points: 187

Total Questions: 106

Total Answers: 118

Location: Saint Helena

Member since Mon, Jan 16, 2023

1 Year ago

answered 12 Years ago jackie · Accepted Answer

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:

Your JavaScript file is not being properly loaded into your page

You have a botched version of jQuery. This could happen because someone edited the core file, or a plugin may have overwritten the $
variable.

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.