Display a warning with 'onbeforeunload' when leaving a page, except if 'Submit' is clicked

Question

I wish to display a warning if a user attepmts to leave a page that contains unsaved settings, but obviously not if they are attempting to save those settings.

I guess my understanding is wrong, as I thought the below should work, but it does not. Can somebody tell me what I am doing wrong? Thanks.

$('input[name="Submit"]').off('onbeforeunload');

window.onbeforeunload = function closeEditorWarning(){

    /** Check to see if the settings warning is displayed */
    if($('#unsaved-settings').css('display') !== 'none'){
        bol_option_changed = true;
    }

    /** Display a warning if the user is trying to leave the page with unsaved settings */
    if(bol_option_changed === true){
        return '';
    }


};

Answer 1

you could use jquery .on() to set onbeforeunload and then use .off() in form submission

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

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