jQuery: Hinweis beim Verlassen der Seite wenn ein Formular noch nicht abgeschickt wurde

Hat man in mühevoller Arbeit ein langes Formular auf einer Website ausgefüllt, ist es äußerst ärgerlich, wenn man aus Versehen auf einen Link klickt, die Seite verlässt und alle Eingaben verliert und wieder neu eingeben muss.

In diesem kleinen Tutorial möchte ich euch daher einen Weg mit der Hilfe von jQuery zeigen, um das Verlassen der Webseite zu verhindern, wenn man es nicht explizit möchte. Der Code, den ich euch hier vorstellen werde, zeigt nachdem man ein Formular ausgefüllt hat und die Webseite auf einem anderen Weg als durch das Abschicken des Formulars verlassen will, eine Meldung an, in der man sich entscheiden kann, ob man die Seite wirklich verlassen möchte.

HTML

In unserem HTML Dokument erhalten alle Elemente wie Textareas, Input Felder oder Select Boxen, die die Warnung beim Verlassen der Seite auslösen sollen, die Klasse "unloadmsg".

<form name="demo" method="post" action="">
   <input name="input1" type="text" class="unloadmsg" value="">
   <input name="input2" type="text" value="">

   <select name="select1" class="unloadmsg">
      <option value="1">1</option>
      <option value="2">2</option>
   </select>

   <textarea name="textarea1" class="unloadmsg"></textarea>

   <input name="submit" type="submit" value="Speichern">
</form>

Soll ein Element die Warnung nicht auslösen, lassen wir hier einfach die Klasse weg. Im Beispiel wurde dem Input Feld "input1" die Klasse zugewiesen und dem Feld "input2" nicht. Daher wird die Meldung später nicht angezeigt, wenn Änderungen in "input2" vorgenommen wurden, jedoch wenn "input1" geändert wurde schon.

jQuery

Die Warnung soll nur angezeigt werden, wenn auch tatsächlich Änderungen in den Eingabefeldern mit der Klasse "unloadmsg" vorgenommen wurden. Hat der Nutzer nichts ausgefüllt und keine Änderungen vorgenommen, soll auch keine Meldung angezeigt werden. Deswegen sorgen wir mit jQuery dafür, dass erst bei einer Änderung eines der Felder (change Event) die Meldung gesetzt werden soll (bind).

$(document).ready(function() {
   $('.unloadmsg').change(function() {
      $(window).bind('beforeunload', function() {
         return 'Wollen Sie die Seite wirklich verlassen?';
      });
   });

   $("form").submit(function() {
      $(window).unbind('beforeunload');
   });
});

Zuletzt müssen wir noch dafür sorgen, dass das Verlassen der Seite beim Abschicken des Formulars (Klick auf den Submit Button) möglich bleibt. Daher definieren wir im letzten Teil unseres jQuery Codes, dass die angeheftete Aktion beim Klick auf den Submit Button wieder entfernt wird (unbind).