Potwierdzenie opuszczenia strony, formularza - jak zrobić?

Data aktualizacji: 22.04.2024r. Autor: Bartosz Stefanicki.

Klient wypełnia ważny formularz, następnie przypadkowo zamyka przeglądarkę. 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.

Kategorie: HTML + CSS. Tagi: #ajax, #formularze, #jquery, #javascript, #formularz. Źródło obrazków: Pixabay, Font awesome.