Activating OnBeforeUnload ONLY when field values have changed

I had a similar requirement so came up with following jQuery script:

$(document).ready(function() {    needToConfirm = false;     window.onbeforeunload = askConfirm;});function askConfirm() {    if (needToConfirm) {        // Put your custom message here         return "Your unsaved data will be lost.";     }}$("select,input,textarea").change(function() {    needToConfirm = true;});

The above code checks the needToConfirm variable, if its true then it will display warning message.Whenever input, select or textarea elements value is changed, needToConfirm variable is set to true.

PS: Firefox > 4 don't allow custom message for onbeforeunload.
Reference: https://bugzilla.mozilla.org/show_bug.cgi?id=588292

UPDATE: If you are a performance freak, you will love @KyleMit's suggestion. He wrote a jQuery extension only() which will be executed only once for any element.

$.fn.only = function (events, callback) {    //The handler is executed at most once for all elements for all event types.    var $this = $(this).on(events, myCallback);    function myCallback(e) {        $this.off(events, myCallback);        callback.call(this, e);    }    return this};    $(":input").only('change', function() {    needToConfirm = true;});

We just use Window.onbeforeunload as our "changed" flag. Here's what we're doing, (using lowpro):

Event.addBehavior({  "input[type=radio]:change,input[type=text]:change,input[type=checkbox]:change,select:change": function(ev) {       window.onbeforeunload = confirmLeave;  }  ".button.submit-button:click": function(ev) {       window.onbeforeunload = null;  },});function confirmLeave(){    return "Changes to this form have not been saved. If you leave, your changes will be lost."  }

The following works well in jQuery:

var needToConfirm = false;$("input,textarea").on("input", function() {  needToConfirm = true;});$("select").change(function() {  needToConfirm = true;});window.onbeforeunload = function(){          if(needToConfirm) {    return "If you exit this page, your unsaved changes will be lost.";          }}   

And if the user is submitting a form to save the changes, you might want to add this (change #mainForm to the ID of the form they're submitting):

$("#mainForm").submit(function() {  needToConfirm = false;});