Wie man Informationen aus einem Formular mit jQuery

January 19

Formulare, angetrieben von einem jQuery-Script verwenden die Funktion "serializeArray()" jedes Formularfeld zu finden und seine Informationen in ein Array speichern. Ein Array ist wie eine Variable, aber es enthält mehrere Werte statt nur einem. Da es mehrere Werte enthält, müssen Sie zusätzliche Arbeit um diese Werte zu erhalten und zurück an den Benutzer ausgegeben. Die Funktion "each()" in jQuery behandelt die meisten der Arbeit, jeder Wert durchlaufen und Ausführen von Code, die Sie innerhalb der Funktion zu platzieren.

Anweisungen

1 Öffnen Sie die Webseite mit dem Formular in Notepad oder einem Codeeditor und fügen Sie die jQuery-Bibliothek-Datei hinzu, falls es nicht bereits vorhanden ist:

< script-Tags in den HTML-Code.

2 Fügen Sie ein neues Paar "< >" Skripttags unterhalb der jQuery-Dateiverweise und schreiben Sie die Funktion "Dokument bereit" erzwingen das Skript warten, bis die Seite geladen komplett, bevor es ausgeführt wird:

< Skript-Typ = "Text/Css" >

{$(function()}

});

< / script >

3 Wählen Sie das Formular aus, und erstellen Sie eine neue Funktion, die durch den "Abschicken"-Ereignis ausgelöst:

< Skript-Typ = "Text/Css" >

{$(function()}

{$('form').submit(function()}

});

});

< / script >

4 Verwendung "serializeArray()", um die Eingabe von Form und verwandeln es in eine Array-Variable, in der alle Daten gespeichert:

< Skript-Typ = "Text/Css" >

{$(function()}

{$('form').submit(function()}

formInput = $(this).serializeArray();

});

});

< / script >

"$(Dies)" Selector wählt das HTML-Element aus der übergeordneten Funktion im Skript, in diesem Fall das Webformular. Legen Sie es gleich einer Variablen, so dass Sie später die Daten bearbeiten können.

5 Fügen Sie "false zurückgeben" an Ihr Skript innerhalb der Funktion "submit()" zu verhindern, dass die Submit-Schaltfläche Senden des Benutzers zu einer neuen Seite.

< Skript-Typ = "Text/Css" >

{$(function()}

{$('form').submit(function()}

formInput = $(this).serializeArray();

return false;

});

});

< / script >

6 Fügen Sie diesen Code auf der "submit()"-Funktion, die Ausgabe der Ergebnisse des Formulars auf eine leere "< Div >"-Tags mit einem ID-Namen "Resultate":

$.each (FormInput, Funktion (i, Feld) {}

$('#results').append (field.name + ":" + field.value + "");

});

Die Funktion "each()" in jQuery durchläuft jeder Wert im Array erstellt von "serializeArray()" und fügt den Namen und den Wert jedes Feldes. Der Wert eines Feldes ist die Eingaben des Benutzers.