Woher weiß ich, dass sich eine Formulareingabe geändert hat?

Ich habe ein Formular generiert von <% Ajax.BeginForm() {} %> die viele Eingaben und Texareas enthält.

Wenn sich ein Eingabewert ändert, muss ich davon wissen und die Eingabe und das Formular als “dirty” markieren. Wenn der Benutzer versucht, die Seite ohne Speichern zu verlassen, werde ich ihn oder sie bitten, das Abbrechen der Änderungen zu bestätigen.

Irgendwelche Vorschläge, wie das gemacht werden sollte?

Die HTML-Steuerelemente enthalten eine Eigenschaft, die den ursprünglichen Wert enthält. Sie können diesen Wert mit dem aktuellen Wert vergleichen, um festzustellen, ob es Änderungen gegeben hat.

function getHasChanges() {
    var hasChanges = false;

    $(":input:not(:button):not([type=hidden])").each(function () {
        if ((this.type == "text" || this.type == "textarea" || this.type == "hidden") && this.defaultValue != this.value) {
            hasChanges = true;
            return false;             }
        else {
            if ((this.type == "radio" || this.type == "checkbox") && this.defaultChecked != this.checked) {
                hasChanges = true;
                return false;                 }
            else {
                if ((this.type == "select-one" || this.type == "select-multiple")) {
                    for (var x = 0; x < this.length; x++) {
                        if (this.options[x].selected != this.options[x].defaultSelected) {
                            hasChanges = true;
                            return false;
                        }
                    }
                }
            }
        }
    });

    return hasChanges;
}

function acceptChanges() {
    $(":input:not(:button):not([type=hidden])").each(function () {
        if (this.type == "text" || this.type == "textarea" || this.type == "hidden") {
            this.defaultValue = this.value;
        }
        if (this.type == "radio" || this.type == "checkbox") {
            this.defaultChecked = this.checked;
        }
        if (this.type == "select-one" || this.type == "select-multiple") {
            for (var x = 0; x < this.length; x++) {
                this.options[x].defaultSelected = this.options[x].selected
            }
        }
    });
}

Diese alte Frage wiederbeleben, weil ich an einen einfacheren/besseren Weg gedacht habe. Anstatt auf Ereignisse an den verschiedenen Eingaben zu hören, können Sie die ursprünglichen Formulardaten serialisieren, speichern und später erneut serialisieren und prüfen, ob sie sich geändert haben, wie folgt:

var originalFormData = $('form#formId').serialize();
function checkFormChanged() {
    if(originalFormData !== $('form#formId').serialize()) {
        //it's dirty!
    }
}

Ein zusätzlicher Vorteil hier ist, dass wenn der Benutzer eine Änderung vornimmt und dann kehrt zurück it, wird diese Prüfung das Formular als sauber melden.

Aus jQuery-Dokumenten:

//This applies to whole form
$('#formID').change(function() {
  alert('Form changed!');
});

Und Sie könnten dies tun, um nur die Eingaben zu überprüfen und den Benutzer zu benachrichtigen, wenn er versucht, ohne Änderungen zu beenden.

var inputsChanged = false;
$('#formID input').change(function() {
  inputsChanged = true;
});

$(window).unload(function() {
  if (inputsChanged === true) {
    alert('Would you like to save your edits before exiting?'); 
  }    
});

jQuery-API .change()

Ich würde das mit jQuery machen. Es wäre so etwas (nur ein Entwurf, Sie müssen möglicherweise Code hinzufügen/ändern):

$(document).ready(function() {  
    $('#formId:input').each(function(key) {
        $(this).change(function() {
            $(this).addClass('dirty');
        });
    });
});

Überprüfen Sie dann vor dem POSTing, ob es eine unsaubere Eingabe gibt. Sie können sogar etwas Farbe hinzufügen, indem Sie die schmutzige CSS-Klasse verwenden.

EDIT: Tippfehler behoben ‘geändert’ zu ‘ändern’

Sie könnten das jquery-Plugin Dirrty verwenden, um das Formular Dirty zu identifizieren.

https://github.com/rubentd/dirrty

Setzen Sie im Ereignis on(“dirty”) eine globale Variable auf true, um zu erkennen, dass sich das Formular geändert hat.

Handhaben window.onbeforeunload oder $(window).unload() Ereignis und erhalten Sie eine Bestätigung vom Benutzer basierend auf diesem Variablenwert.

Der Vorteil dieses Plugins ist, dass Sie mit dem ‘on(“clean”)-Event zurückverfolgen können, ob das Formular wieder auf die ursprünglichen Werte geändert wird