На некоторых страницах приходиться заполнять какие-либо данные формы. И если посетитель в процессе заполнения случайно кликнет на ссылку или случайно перезагрузит — поля обновятся. Чтобы этого избежать на данных страницах мы можем установить скрипт с предупреждением о переходе.

Данный скрипт сработает при условиях:

• Переход по любой ссылке сайта, кроме 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();');
});

Минусом является то что если заполнены не все поля и форма выдает уведомления, то с этих пор функция уведомления об уходе со страницы перестает работать.

Поделиться в соц. сетях: