it-swarm.com.de

jquery warnt, wenn Sie die Seite verlassen, ohne auf die Schaltfläche "Speichern" zu klicken

Der folgende Code führt eine Warnung aus, wenn Sie Daten auf der Seite ändern und die Seite dann verlassen. Ich möchte das - außer wenn der Benutzer die Speichertaste drückt.

Dies ist der Jquery-Code:

$(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?";
      }
  }
});

Dies ist die Schaltfläche, die die Daten speichert:

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

UPDATE Danke tymeJV !!!!!!!

Falls jemand anderes es braucht, funktioniert das:

$(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;
    });
});
38
Reddirt

In Anbetracht Ihrer Save-Button-Informationen:

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

Sie können den Wert von formmodified einstellen. 

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

Ihre Prüfung am Ende sollte jetzt nicht ausgelöst werden

23
tymeJV
$('#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.
});

Sie können die Funktion "Google JQuery Form Serialize" verwenden. Hierbei werden alle Formulareingaben gesammelt und in einem Array gespeichert. Ich denke, das ist genug :)

6
Wasim A.

Dies ist keine exakte Antwort auf die obige Frage, aber als Referenz für diejenigen, die nach einer Lösung für das Problem suchen 'Benutzer über ungespeicherte Formularänderungen benachrichtigen', wie ich es war, möchte ich das jQuery-Plugin empfehlen AreYouSure Dieses sehr leichte Plugin behandelt alle Mutationen wie Fettumbrüche wie das Zurücksetzen von Formularänderungen, das Klicken auf die Schaltfläche zum Zurücksetzen des Formulars, das Hinzufügen/Entfernen von Formularfeldern usw., ohne dass weitere Änderungen vorgenommen werden müssen.

3
wedi

Ihre Warnung wird erst angezeigt, wenn Unschärfe vorliegt, was nicht 100% narrensicher ist. Ändern Sie die folgenden Zeilen, um sie luftdicht zu machen:

$('form *').change(function () {

zu

$('form *').on('change input', function () {
1
JasonM

Erstens müssen Sie den Wert Ihrer Eingaben abrufen, wenn der Benutzer Änderungen an dem Formular vorgenommen hat. also kam mir diese antwort:

    document.querySelector('.send').addEventListener("click", function(){
        window.btn_clicked = true;
    });
    window.onbeforeunload = function(){
       if(!window.btn_clicked){
        var bla = $('#lot_t').val(); // getting the value of input
          if(!bla == ''){    //checking if it is not null
            return 'Are you sure to leave this page?';
          }
}


    };
0
curiosity

Wenn Sie verhindern möchten, dass die Seite beim Klicken auf einen Link verlassen wird, können Sie an das beforeunload -Ereignis binden und e übergeben:

$(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();
        }
    });
});    
0
Outside Edge