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ę?';
});
Warto zobaczyć
Szukasz hostingu?
Jest dużo firm oferujących hosting, ale którą wybrać? Przedstawiamy zestawienie najciekawszych propozycji i ranking hostingów (Wrzesień 2023).
Data publikacji: 04.02.2021 r. Tagi: ajax, formularze, jquery, javascript, formularz. Źródło obrazka porady: Pixabay.