Potwierdzenie opuszczenia strony, formularza - jak zrobić?

Bartosz

Bartosz Stefanicki Poniedziałek, 22.04.2024

Potwierdzenie opuszczenia strony, formularza - jak zrobić?

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.

Warto zobaczyć

Szukasz hostingu?

Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Czerwiec 2024).

Data publikacji: Czwartek, 4.02.2021. Tagi: ajax, formularze, jquery, javascript, formularz. Źródło obrazka Pixabay, Font awesome.

4 komentarzy


© 2005-2024 itporady.pl. Wszystkie prawa zastrzeżone.

Strona korzysta z plików cookies w celu realizacji usług i zgodnie z Polityką prywatności. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.