Kernpunkte

• Die Funktion FormChanges() in JavaScript erkennt Aktualisierungen für jedes Formular, indem ein einzelner überladener Formularparameter (der DOM -Knoten oder die String -ID des Formulars) akzeptiert und ein Array von Formelementknoten zurückgegeben wird, die der Benutzer ge?ndert hat.
• Wenn das Formular nicht gefunden wird, gibt die Funktion null zurück und ist so konzipiert, dass sie mit allen JavaScript -Bibliotheken kompatibel ist und in allen modernen Browsern ausgeführt wird, einschlie?lich IE6 und IE7.
Die tats?chliche Anwendung der Funktion
• FormChanges() enth?lt die Erinnerung an Benutzer an die Anzahl der von ihnen erstellten Feldaktualisierungen oder die Aktualisierung versteckter Werte, um anzuzeigen, dass keine ?nderungen vorgenommen wurden, sodass der serverseitige Code das Feld Validierung und Datenbankaktualisierungen überspringen kann.

Im vorherigen Beitrag haben wir gelernt, wie man überprüft, ob der Benutzer einzelne Formularelemente ver?ndert hat. Heute werden wir diese Informationen verwenden, um JavaScript -Code zu schreiben, mit dem alle Formularaktualisierungen erfasst werden k?nnen. Hier sind einige Beispiele und Code -Links: - Code -Demo -Seite - FormChanges() JavaScript -Code - ZIP -Datei für alle Codes und Beispiele

Vorsichtsma?nahmen

Als guter Entwickler werden wir unsere Anforderungen definieren, bevor wir einen Code schreiben: - Wir schreiben eine Funktion FormChanges(), die einen einzelnen überladenen Formular Parameter akzeptiert - den DOM -Knoten oder die String -ID des Formulars. - Diese Funktion gibt ein Array von Formelementknoten zurück, die der Benutzer ge?ndert hat. Auf diese Weise k?nnen wir feststellen, welche Felder ge?ndert haben oder ob das Array leer ist, bedeutet, dass sich keine Felder ge?ndert haben. - Wenn das Formular nicht gefunden wird, gibt die Funktion null zurück. - Wir verlassen uns nicht auf eine bestimmte JavaScript -Bibliothek, daher ist die Funktion mit allen Bibliotheken kompatibel. - Es muss in allen modernen Browsern lief, einschlie?lich IE6 oder IE7.

forchanges () Funktion

Für einfaches Verst?ndnis ist Folgendes der Beginn unserer Funktion:

function FormChanges(form) {

Wir überladen den Formularparameter - es kann ein DOM -Element sein, aber wenn es sich um eine ID -Zeichenfolge handelt, müssen wir das Element im DOM finden:

if (typeof form == "string") form = document.getElementById(form);

Wenn wir keinen Formularknoten haben, gibt die Funktion Null ohne weiteren Betrieb zurück:

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

Wir werden jetzt einige Variablen deklarieren, die wir w?hrend der gesamten Funktion verwenden werden: - changed ist das aktualisierte Formelement des zurückgegebenen Benutzers - n ist der Formularelement -Knoten - c Wenn sich das Element ge?ndert hat, ist die Standardoption für die Auswahlbox - def, o und ol und opt und

??> und

var changed = [], n, c, def, o, ol, opt;

werden in dem Loop,

und c ??> ??> ??> ??> ??> werden in den Loops verwendet,

und werden in dem Loop, und ??> ??> ??> werden in den Loops verwendet, die in den Loops verwendet werden. Wir k?nnen jetzt unsere Hauptschleife starten, die jedes Formularelement nacheinander überprüft. wird zun?chst auf False eingestellt, was darauf hinweist, dass das Element, das wir überprüfen, keine ge?ndert hat:

function FormChanges(form) {

Als n?chstes extrahieren wir den Knotennamen (Eingabe, TextArea, ausw?hlen) und überprüfen ihn in der Switch -Anweisung. Wir suchen nur nach ausgew?hlten und nicht selektierten Knoten, sodass die Switch-Anweisung nicht ausschlie?lich erforderlich ist. Es ist jedoch einfacher zu lesen und erm?glicht es uns, bei der Einführung neuer Knotentypen weitere Knotentypen hinzuzufügen.

Beachten Sie, dass die meisten Browser Knotennamen in Gro?buchstaben zurückgeben. Aus Sicherheitsgründen konvertieren wir jedoch immer die Zeichenfolgen in Kleinbuchstaben.

if (typeof form == "string") form = document.getElementById(form);

Die erste Fallanweisung bewertet die Dropdown-Liste der Auswahl. Dies ist die komplexeste überprüfung, da wir alle Suboptionselemente durchlaufen müssen, um die ausgew?hlten und ausgew?hlten Eigenschaften zu vergleichen.

Die Schleife setzt Def auch auf die letzte Option mit der Eigenschaft "ausgew?hlt". Wenn wir eine Radio -Box haben, vergleichen wir DEF mit der SelectedIndex -Eigenschaft des Knotens, um sicherzustellen, dass wir mit der Eigenschaft "ausgew?hlt" F?lle oder mehrere Optionen Elemente vorhanden sind (siehe vorheriger Beitrag für eine vollst?ndige Beschreibung).

if (!form || !form.nodeName || form.nodeName.toLowerCase() != "form") return null;

Jetzt müssen wir uns mit Eingabe- und Text -Elementen befassen. Beachten Sie, dass unser Fall "textarea": ??Anweisung nicht Pause verwendet, sodass er in den Fall "Eingabe" f?llt: Code.

Kontrollk?stchen und Optionsfelder vergleichen Sie ihre überprüften und Standard -Scheck -Eigenschaften, w?hrend alle anderen Typen ihren Wert mit StandardValue vergleichen:

var changed = [], n, c, def, o, ol, opt;

Wenn der Wert von C wahr ist, hat sich das Element ge?ndert, sodass wir es dem ge?nderten Array anh?ngen. Die Schleife ist jetzt abgeschlossen:

for (var e = 0, el = form.elements.length; e < el; e++) {
    n = form.elements[e];
    c = false;

Wir müssen nur das ge?nderte Array zurückgeben und die Funktion beenden:

switch (n.nodeName.toLowerCase()) {

Beispiel verwendet

Angenommen, wir haben die folgende Form erstellt:

    // select boxes
    case "select":
        def = 0;
        for (o = 0, ol = n.options.length; o < ol; o++) {
            opt = n.options[o];
            if (opt.selected) def = o;
        }
        c = (n.selectedIndex != def);
        break;

Wir k?nnen überprüfen, ob der Benutzer alle Formularfelder mit dem folgenden Code ge?ndert hat:

        // input / textarea
        case "textarea":
        case "input":
            switch (n.type.toLowerCase()) {
                case "checkbox":
                case "radio":
                    // checkbox / radio
                    c = (n.checked != n.defaultChecked);
                    break;
                default:
                    // standard values
                    c = (n.value != n.defaultValue);
                    break;
            }
            break;
    }

oder, wenn keine ?nderungen auftreten, k?nnen wir den versteckten "ge?nderten" Wert auf "Nein" aktualisieren, wenn wir das Formular senden. Dadurch kann der serverseitige Code Feldüberprüfung und Datenbankaktualisierung überspringen:

    if (c) changed.push(n);
}

(Hinweis: Das ?ndern von "Ja" in "Nein" wird elegant herabstiegen, da der Server immer eingehende Daten verarbeitet, wenn JavaScript nicht verfügbar ist.)

Ich hoffe, Sie finden es nützlich.

(Der FAQS-Teil wird hier weggelassen, da der FAQS-Teil des Originaltextes wenig mit der Codefunktion zu tun hat, was eine zus?tzliche Erkl?rung der Codefunktion ist und mit dem Pseudo-ORIGINAL-Ziel nicht übereinstimmt.

Das obige ist der detaillierte Inhalt vonSo schreiben Sie eine generische Formular -Update -Erkennungsfunktion in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!