window.onbeforeunload - Mostra solo avviso quando non si invia il modulo

Question

Sto utilizzando window.onbeforeunload per impedire all'utente di spostarsi dopo aver modificato i valori in un modulo. Funziona bene, tranne che mostra anche l'avviso quando l'utente invia il modulo (non desiderato).

Come posso fare questo senza mostrare l'avviso quando il modulo viene inviato?

codice attuale:

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

Utilizzando presentare evento del form per impostare un flag potrebbe funzionare per voi .

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

È possibile gestire l'evento submit(), che avverrà solo per vostro modulo di presentazione.

All'interno di questo evento, impostare la variabile flag formHasChanged su false per consentire allo scaricamento di procedere. Inoltre, solo un suggerimento, ma dal momento che lo scopo di tale variabile bandiera sarà cambiato, quindi si consiglia di rinominarlo qualcosa come 'warnBeforeUnload'

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

Answer 3

si potrebbe usare .on() per associare onbeforeunload e quindi utilizzare .OFF() per sciogliere in forma di presentazione

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

ero alla ricerca di una soluzione migliore per questo. Quello che vogliamo è semplicemente escludere uno o più trigger dal creare il nostro "Sei sicuro?" la finestra di dialogo. Quindi non dovremmo creare più soluzioni alternative per sempre più effetti collaterali. Cosa succede se il modulo viene inviato senza un evento click del pulsante di invio? Cosa succede se il nostro gestore di clic rimuove lo stato isDirty ma successivamente il modulo di invio viene bloccato in seguito? Certo, possiamo cambiare il comportamento dei nostri trigger, ma il posto giusto sarebbe la logica che gestisce il dialogo. Il binding all'evento submit del modulo anziché il binding all'evento click del pulsante di invio è un vantaggio delle risposte in questo thread rispetto ad altre che ho visto prima, ma questo IMHO risolve solo l'approccio sbagliato.

Dopo alcuni scavi nell'evento evento dell'evento onbeforeunload ho trovato la proprietà .target.activeElement, che contiene l'elemento, che ha originariamente originato l'evento. Quindi, sì, è il pulsante o il collegamento o qualsiasi cosa abbiamo cliccato (o nulla del tutto, se il browser stesso ha navigato lontano). Il nostro "Sei sicuro?" dialogo logica poi si riduce a due componenti seguenti:

1. La isDirty manipolazione della forma: "Sei sicuro"

   $('form.pleaseSave').on('change', function() { 
       $(this).addClass('isDirty'); 
   }); 
   

2. Il dialogo logica:

   $(window).on('beforeunload', function(event) { 
       // if form is dirty and trigger doesn't have a ignorePleaseSave class 
       if ($('form.pleaseSave').hasClass('isDirty') 
        && !$(event.target.activeElement).hasClass('ignorePleaseSave')) { 
       return "Are you sure?" 
       } 
       // special hint: returning nothing doesn't summon a dialog box 
   }); 
   

E 'semplicemente come questo. Non sono necessari soluzioni alternative. Basta dare i trigger (invio e altri pulsanti di azione) una classe ignorePleaseSave e il modulo a cui vogliamo che la finestra di dialogo venga applicata a una classe pleaseSave. Tutti gli altri motivi per scaricare la pagina poi convoca il nostro "Sei sicuro?" dialogo.

P.S. Sto usando jQuery qui, ma penso che la proprietà .target.activeElement sia disponibile anche in semplice JavaScript.