Wyświetlenie ostrzeżenia z funkcją "onbeforeunload" podczas opuszczania strony, chyba że kliknięto przycisk "Wyślij".

Question

Chcę wyświetlać ostrzeżenie, jeśli użytkownik podejmie próbę opuszczenia strony zawierającej niezapisane ustawienia, ale oczywiście nie, jeśli chce zapisać te ustawienia.

Domyślam się, że moje zrozumienie jest złe, ponieważ uważam, że poniższy powinien działać, ale tak nie jest. Czy ktoś może mi powiedzieć, co robię źle? Dzięki.

$('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

można spróbować w ten sposób: ustawić flagę podczas przedstawienia kliknięciu przycisku i używać tej flagi, by sprawdzić, czy użytkownik kliknął składać lub opuszczania strony połowie

Pseudo kod:

var submit_clicked = false; 

$('input[name="Submit"]').click(function(){ 
    submit_clicked = true; 
}); 


window.onbeforeunload = function closeEditorWarning() { 

    /** Check to see if the settings warning is displayed */ 
    if(($('#unsaved-settings').css('display') !== 'none') && 
     submit_clicked === false) { 
    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 2

można użyć .Na jquery(), aby ustawić onbeforeunload a następnie użyć .off() w przedłożeniu formularza

// 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'); 
}); 

Answer 3

Napotkałem ten problem, więc chciałbym podzielić się moim rozwiązaniem.

Rozwiązanie Brent White nie działa, ponieważ korzystam z wtyczki do sprawdzania poprawności jQuery. Oznacza to, że jeśli użytkownicy podadzą nieprawidłowe dane, nawet po kliknięciu przycisku Prześlij, pozostaną na stronie. W tej chwili, jeśli opuszczą lub odświeżą stronę, komunikat ostrzegawczy nie zostanie wyświetlony.

$(window).bind('beforeunload', function(evt) { 
    var isSubmitButton = (evt.srcElement.activeElement.type === "submit"); 
    var isModified = ($form.data("isModified") === true); 
    if (!isSubmitButton && isModified) { 
    return "You need to save your changes before you leave the page"; 
    } 
});