Potwierdzenie opuszczenia strony, formularza - jak zrobić?

Potwierdzenie opuszczenia strony, formularza - jak zrobić?

HTML + CSS Data aktualizacji: 04.02.2021

Potwierdzenie opuszczenia strony, formularza - jak zrobić?

Wyobraźmy sobie taki scenariusz - klient wypełnia dłuższy formularz na stronie, a 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 zatem jakie rozwiązania są najczęściej stosowane przez twórców stron.

1. AreYouSure?

Gotowe rozwiązanie, dzięki któremu jesteśmy w stanie zabezpieczyć np. formularz przez przypadkowym zamknięciem okna.

Plugin ten jest darmowy i można go pobrać z GitHuba pod adresem: 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>

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

Ranking hostingów i domen

Sprawdź najlepsze oferty hostingowe i najtańsze domeny w 2021 roku.

Ranking hostingów
Ranking cen domen

Autor: Bartosz Stefanicki. Data publikacji: 03.02.2021. Tagi: ajax, formularz, formularze, javascript, jquery. Źródło obrazka porady: Pixabay.

1 komentarz