Ungespeicherte Formluaränderungen abfangen
Das hier vorgestellte JavaScript-Schnipsel dient dazu, auf einer Webseite vor dem Verlassen durch den Benutzer (z.B. durch Betätigen des Zurück-Knopfes, Benutzen eines Links, Schließen des Fensters, ...) zu überprüfen, ob enthaltene Formularfelder verändert wurden und den Nutzer bei Bedarf darauf hinzuweisen.
Um diese Funktion zu benutzen, reicht es, den unten gezeigten Quellcode diret in die Seite einzubauen, oder - die bevorztugte Lösung - über eine separate Datei über den Seiten-Header zu laden:
<script type="text/javascript" src="[Dateiname]"></script>
Das Script benutzt die jQuery[1]-Bibliothek. Diese ist also vor dem Script in die Seite einzubauen.
Quellcode
$(document).ready ( function () {
$("form" ).change (
form_changed
);
$("form").submit (
form_unchange
);
$(":input").keydown (
form_changed
);
var form_change_noticed = false;
function form_changed () {
form_change_noticed = true;
}
function form_unchange () {
form_change_noticed = false;
}
window.onbeforeunload= function(){
if ( form_change_noticed ) {
return "Es gibt noch ungespeicherte Änderungen!";
} else
return;
};
});
Erläuterungen
- Das $(document).ready() Konstrukt dient dazu, die Event-Handler für die Formularänderungen erst einzutragen, wenn die komplette HTML-Seite geladen ist. Beim Einbinden des Scriptes im Header würden die Handler ansonsten in keinem Formular zur Verfügung stehen. Ein direktes Einbinden des Scriptes müsste sonst am Ende des HTML-Codes erfolgen.
- Der onbeforeunload-Handler wird vor dem Verlassen einer Webseite aufgerufen. Liefert er einen anderen Wert als null zurück, wird der Benutzer mit einer Meldung zum Bestätigen aufgefordert. Der Rückgabewert des Handlers wird dabei im angezeigten Dialog verwendet. Eine andere Art, den Dialog zu beeinflussen, gibt es nicht.
Ergänzung (16.11.2010): Ein return-Wert von null führt im Internet Explorer zu einer Anzeige der Dialogbox mit dem Wort null als Text. Ein return ohne Angabe führt zum gewünschten Ergebnis.
Copyright etc.
Die hier vorgestellte Lösung kann ohne weiteres kopiert und weiterverwendet werden. Ein Hinweis auf meine Hompage wäre natürlich nett.
Links
- [1]jQuery Homepage, http://jquery.com/
Kommentare