window.onbeforeunload - 仅在不提交表单时显示警告

Question

我正在使用window.onbeforeunload来防止用户在更改表单上的值后导航.这工作正常,除了它还在用户提交表单时显示警告(不需要).

如何在表单提交时不显示警告的情况下执行此操作？

当前代码:

var formHasChanged = false;

$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) {
    formHasChanged = true;
});

$(document).ready(function () {
    window.onbeforeunload = function (e) {
        if (formHasChanged) {
            var message = "You have not saved your changes.", e = e || window.event;
            if (e) {
                e.returnValue = message;
            }
            return message;
        }
    }
});

Answer 1

使用表单的提交事件来设置标志可能对您有用.

 var formHasChanged = false;
 var submitted = false;

$(document).on('change', 'form.confirm-navigation-form input, form.confirm-navigation-form select, form.confirm-navigation-form textarea', function (e) {
    formHasChanged = true;
});

$(document).ready(function () {
    window.onbeforeunload = function (e) {
        if (formHasChanged && !submitted) {
            var message = "You have not saved your changes.", e = e || window.event;
            if (e) {
                e.returnValue = message;
            }
            return message;
        }
    }
 $("form").submit(function() {
     submitted = true;
     });
});

Answer 2

您可以使用.on()绑定onbeforeunload,然后使用.off()在表单提交中解除绑定

$(document).ready(function () {
    // Warning
    $(window).on('beforeunload', function(){
        return "Any changes will be lost";
    });

    // Form Submit
    $(document).on("submit", "form", function(event){
        // disable warning
        $(window).off('beforeunload');
    });
}

Answer 3

您可以处理submit()事件,该事件仅适用于您的表单提交.

在该事件中,将flag变量设置formHasChanged为false以允许卸载继续.此外,只是一个建议,但由于该标志变量的目的将发生变化,因此您可能希望将其重命名为'warnBeforeUnload'

$(document).submit(function(){
    warnBeforeUnload = false;
});