На некоторых страницах приходиться заполнять какие-либо данные формы. И если посетитель в процессе заполнения случайно кликнет на ссылку или случайно перезагрузит — поля обновятся. Чтобы этого избежать на данных страницах мы можем установить скрипт с предупреждением о переходе.
Данный скрипт сработает при условиях:
- Переход по любой ссылке сайта, кроме hash-ссылки
- Закрытие вкладки браузера
- Перезагрузка окна (кнопкой refresh или сочетанием клавиш)
Собственно скрипт:
window.onbeforeunload = function() { return "Что-нибудь сообщить пользователю"; }
Данный скрипт довольно примитивный, т.к. по сути срабатывает при любом варианте перезагрузке страницы, в т.ч. при отправке формы. Скрипт необходимо оборачивать в некое условие, по которому любой переход (обновление страницы) кроме отправки формы должен его вызывать.
Подтвердить переход
function goodbye(e) {
if(!e) e = window.event;
//e.cancelBubble is supported by IE - this will kill the bubbling process.
e.cancelBubble = true;
e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog
//e.stopPropagation works in Firefox.
if (e.stopPropagation) {
e.stopPropagation();
e.preventDefault();
}
}
window.onbeforeunload=goodbye;
Исключить событие отправки формы
var formSubmitting = false;
var setFormSubmitting = function() { formSubmitting = true; };
window.onload = function() {
window.addEventListener("beforeunload", function (e) {
if (formSubmitting) {
return undefined;
}
var confirmationMessage = 'It looks like you have been editing something. '
+ 'If you leave before saving, your changes will be lost.';
(e || window.event).returnValue = confirmationMessage; //Gecko + IE
return confirmationMessage; //Gecko + Webkit, Safari, Chrome etc.
});
};
К форме нужно добавить атрибут чтобы уведомление не выводил при ее отправке
<form method="post" onsubmit="setFormSubmitting()">
</form>
Можно это сделать функцией. В этом примере добавляем атрибут к форме оформления Woocomemrce
jQuery(document).ready(function() {
$('.woocommerce-checkout').attr('onsubmit','setFormSubmitting();');
});
Минусом является то что если заполнены не все поля и форма выдает уведомления, то с этих пор функция уведомления об уходе со страницы перестает работать.
[site-socialshare]