210 Stimmen

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

Tutorial von Stefan Trost | 09.08.2011 um 10:59

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).

AntwortenPositivNegativ
Avatar
11 Stimme

Hallo, die obige Lösung sorgt leider für das mehrmalige auslösen der Warnung bei mehreren Elementen. Mit einer zusätzlichen Variable klappt aber alles wie gewollt:

$(document).ready(function() {

  var beforeunloadTriggerRequired = true;

  $('[required]:visible').change(function () {
    if (true === beforeunloadTriggerRequired) {
      $(window).on('beforeunload', function () {
        console.log(beforeunloadTriggerRequired);
        return 'Wollen Sie die Seite wirklich verlassen?';
      });
    }
    beforeunloadTriggerRequired = false;
  });

  $('form').submit(function() {
    $(window).off('beforeunload');
    beforeunloadTriggerRequired = true;
  });
});

27.05.2017 um 11:57

AntwortenPositiv Negativ
Antworten

Über den Autor

AvatarSoftware von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen

 

Ähnliche Themen

Wichtiger Hinweis

Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.

Jetzt mitmachen

Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.