Versehentlichen Datenverlust in HTML-Formularen verhindern

Dieser jQuery-Code verhindert, dass ein Benutzer versehentlich seine mühsam eingegeben Daten, durch einen unachtsamen Klick auf einen Link oder durch eine falsche Tastenkombination, verliert.
In diesem Beispiel werden nach dem Laden der Seite alle Formular-Werte per Serialisierung in der Variable „serialized_values“ gespeichert. Sobald jetzt ein Unload-Event ausgelöst wird, muss der Benutzer bestätigen, dass er die aktuelle Seite tatsächlich verlassen möchte. Der Dialog wird nur angezeigt, wenn sich auch tatsächlich Daten verändert haben.

var serialized_values = "";

$(document).ready(function()
{  
  serialized_values = $("form").serialize();  
});

window.onbeforeunload = confirmLeave;

function confirmLeave()
{
    if(serialized_values != $("form").serialize())
    {
        return unescape("Nicht gespeicherte Informationen gehen m%F6glicherweise verloren.");
    }      
}

Um die Bestätigung für einzelne Elemente (z.B. Submit-Buttons) zu deaktivieren, reicht es den Event-Handler auf null zu setzten.

<button type="submit" onclick="window.onbeforeunload = null">Formular speichern</button>