So schreiben Sie eine generische Formular -Update -Erkennungsfunktion in JavaScript

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 
<p> Wir müssen nur das geänderte Array zurückgeben und die Funktion beenden: </p>
<pre class="brush:php;toolbar:false">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 
<p> Wir können überprüfen, ob der Benutzer alle Formularfelder mit dem folgenden Code geändert hat: </p>
<pre class="brush:php;toolbar:false">        // 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!