Potwierdzenie opuszczenia strony, formularza - jak zrobić?

HTML + CSS Data aktualizacji: 20.07.2021

Potwierdzenie opuszczenia strony, formularza - jak zrobić?

Wyobraźmy sobie scenariusz - klient wypełnia dłuższy formularz na stronie, następnie przypadkowo zamyka kartę w przeglądarce. Domyślnie wszystkie wprowadzone dane by przepadły. Jak można się zabezpieczyć przed takimi sytuacjami?

Okazuje się, że jest to bardzo proste. Można dodać kilka linijek kodu JavaScript lub skorzystać z gotowych rozwiązań. Zobaczmy jakie pluginy są najczęściej stosowane przez twórców stron.

1. jQuery Dirty

Najbardziej aktualny plugin, dzięki któremu zabezpieczymy formularz przed przypadkowym zamknięciem okna. Dostępny bezpłatnie na Githubie: https://github.com/simon-reynolds/jquery.dirty.

Aby włączyć jQuery Dirty na formularzu:

$("#formularz").dirty();

Aby włączyć jQuery Dirty na wszystkich formularzach:

$("form").dirty();

Aby wyświetlić alert przed zamknięciem okna:

$("#formularz").dirty({ preventLeaving: true });

2. AreYouSure?

Bliźniacze rozwiązanie jQuery Dirty, przy czym nie rozwijane od dłuższego czasu. Plugin można pobrać z Githuba: https://github.com/codedance/jquery.AreYouSure.

Do strony dodajemy:

<!DOCTYPE html>
<html>
  <head>
    <script src="jquery.js"></script>
    <script src="jquery.are-you-sure.js"></script>
  </head>
</html>

Przykłady wykorzystania znajdziemy bezpośrednio na Githubie, jeden z nich:

<script>
$(function() {
    // Włączenie na wszystkich formularzach na stronie
    $('form').areYouSure();

    // Włączenie dla konkretnego formularza
    $('form#formularz-z-zabezpieczeniem').areYouSure();
}
</script>

3. jQuery

Poniżej przykład wykorzystania jQuery. Komunikat wyświetli się, gdy użytkownik będzie chciał opuścić stronę.

$(window).bind('beforeunload', function() {
  return 'Czy na pewno chcesz opuścić stronę?';
});

Plugin jQuery Dirty, AreYouSure? a także jQuery pozwala na zdefiniowanie treści alertu. Ze względów bezpieczeństwa przeglądarki tego nie wykorzystują i w alercie zawsze jest standardowy komunikat przeglądarki o zapisaniu zmian przed opuszczeniem strony.