Warnung vor dem Verlassen der Webseite mit ungespeicherten Änderungen

Question

Ich habe einige Seiten mit Formularen in meiner Anwendung.

Wie kann ich das Formular so absichern, dass, wenn jemand wegnavigiert oder die Browser-Registerkarte schließt, er aufgefordert wird, zu bestätigen, dass er das Formular wirklich mit ungespeicherten Daten verlassen will?

Answer 1

Der folgende Code funktioniert hervorragend. Sie müssen die Eingabeänderungen Ihrer Formularelemente über das Attribut id erreichen:

var somethingChanged=false;
            $('#managerForm input').change(function() { 
                somethingChanged = true; 
           }); 
            $(window).bind('beforeunload', function(e){
                if(somethingChanged)
                    return "You made some changes and it's not saved?";
                else 
                    e=null; // i.e; if form state change show warning box, else don't show it.
            });
        });

Answer 2

var unsaved = false;
$(":input").change(function () {         
    unsaved = true;
});

function unloadPage() {         
    if (unsaved) {             
        alert("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;