jquery avvisa se si lascia la pagina senza fare clic sul pulsante di salvataggio

Question

Il codice seguente esegue un avviso se si modificano i dati sulla pagina e si lascia la pagina. Lo voglio - tranne quando l'utente preme il pulsante Salva.

Questo è il codice jQuery:

$(document).ready(function() { 
    formmodified=0; 
    $('form *').change(function(){ 
     formmodified=1; 
    }); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() { 
     if (formmodified == 1) { 
      return "New information not saved. Do you wish to leave the page?"; 
     } 
    } 
}); 

Questo è il pulsante che salva i dati:

<input class="btn-primary" name="commit" type="submit" value="Save Material"> 

AGGIORNAMENTO Grazie tymeJV !!!!!!!

Nel caso in cui qualcun altro ne ha bisogno, questo funziona:

$(document).ready(function() { 
    formmodified=0; 
    $('form *').change(function(){ 
     formmodified=1; 
    }); 
    window.onbeforeunload = confirmExit; 
    function confirmExit() { 
     if (formmodified == 1) { 
      return "New information not saved. Do you wish to leave the page?"; 
     } 
    } 
    $("input[name='commit']").click(function() { 
     formmodified = 0; 
    }); 
}); 

Answer 1

Data la tua salvare le informazioni pulsante:

<input class="btn-primary" name="commit" type="submit" value="Save Material"> 

È possibile impostare il valore di formmodified

$("input[name='commit']").click(function() { 
    formmodified = 0; 
}); 

Il suo assegno alla fine non dovrebbe essere attivato ora

Answer 2

$('#form').data('serialize',$('#form').serialize()); // On load save form current state 

$(window).bind('beforeunload', function(e){ 
    if($('#form').serialize()!=$('#form').data('serialize'))return true; 
    else e=null; // i.e; if form state change show box not. 
}); 

È possibile utilizzare la funzione Serializzazione modulo JQuery di Google, che raccoglierà tutti gli input di modulo e li salverà nell'array. Immagino che questa spiegazione sia sufficiente :)

Answer 3

Questa non è una risposta esatta alla domanda di cui sopra ma per riferimento per coloro che sono alla ricerca di una soluzione al problema 'notifica agli utenti le modifiche ai moduli non salvate' come me, I ' Mi piacerebbe consigliare il plugin jQuery AreYouSure. Questo plugin molto leggero gestisce tutti i tipi di dadi e grassetto come le modifiche ai moduli ripristinati, facendo clic sul pulsante di reimpostazione del modulo, aggiungendo/rimuovendo i campi modulo ecc. Senza ulteriori trucchi.

Answer 4

Se si vuole impedire che la pagina di lasciare quando un link viene cliccato, è possibile associare all'evento beforeunload e superare e in:

$(document).ready(function() { 
    var modified = false; 
    $(window).bind('beforeunload', function(e){ 
     if (modified) { 
      $.confirm({ 
       'title' : 'Did You Save Your Changes?', 
       'message' : 'It seems as if you have made changes but didn\'t click Save.\nAre you sure you want to leave the page?', 
       'buttons' : { 
        'OK' : { 
         'class' : 'gray', 
         'action': function(){} // Nothing to do in this case. This can be omitted if you prefer. 
        } 
       }) 
      } 
      e.preventDefault(); 
     } 
    }); 
});