Advertisement
  1. Code
  2. Web Development

Senden Sie ein Formular ohne Seitenaktualisierung mit jQuery

by
Read Time:9 minsLanguages:

German (Deutsch) translation by Alex Grigorovich (you can also view the original English article)

Zuvor zeigte Philo auf Nettuts+, wie Sie mit jQuery WordPress-Kommentaren eine Formularüberprüfung benutzen können, die ohne erneutes Laden der Seite funktioniert. Eine weitere großartige Möglichkeit, jQuery zu nutzen, um die Benutzererfahrung zu verbessern, besteht darin, Ihr Formular nicht nur zu validieren, sondern vollständig ohne Seitenaktualisierung einzureichen.

In diesem Tutorial werde ich Ihnen zeigen, wie einfach es ist, genau das zu tun - senden Sie ein Kontaktformular, das eine E-Mail sendet, ohne die Seite mit jQuery zu aktualisieren! (Die eigentliche E-Mail wird mit einem PHP-Skript gesendet, das im Hintergrund verarbeitet wird). Lass uns anfangen.


Was wir bauen

In diesem Beispiel haben wir ein einfaches Kontaktformular mit Name, E-Mail-Adresse und Telefonnummer. Das Formular sendet alle Felder an ein PHP-Skript ohne Seitenaktualisierung unter Verwendung nativer jQuery-Funktionen (native Bedeutung, Sie müssen keine zusätzlichen Plugins herunterladen, damit es funktioniert.

Wenn Sie diesen Artikel ohne vorherige Kenntnis von jQuery gefunden haben, ist der Artikel von Jeffrey Way über 15 Ressourcen ein guter Ausgangspunkt, um Ihnen den Einstieg in jQuery From Scratch zu erleichtern.


Schritt 1 - Erstellen Sie das HTML-Form

Werfen wir einen Blick auf unser HTML-Markup. Wir beginnen mit unserem grundlegenden HTML-Formular:

Möglicherweise stellen Sie fest, dass ich ein div mit der ID contact_form eingefügt habe, das das gesamte Formular umschließt.
Verpassen Sie dieses Div nicht in Ihrer eigenen Form, da wir dieses Wrapper-Div später benötigen werden. Sie
Möglicherweise werden auch bemerken, dass ich sowohl den Aktions- als auch den Methodenteil des Formular-Tags leer gelassen habe. Wir
brauchen hier eigentlich nicht, denn jQuery kümmert sich später um alles.

Ein weiterer wichtiger Punkt, den Sie unbedingt berücksichtigen sollten, sind die ID-Werte für jedes Eingabefeld. Die ID-Werte
sind das, wonach Ihr jQuery-Skript suchen wird, um das Formular zu verarbeiten.

Ich habe einige CSS-Stile und ein Hintergrundbild in Photoshop hinzugefügt, um das folgende Formular zu erstellen:


Schritt 2 - Beginnen Sie mit dem Hinzufügen von jQuery

Der nächste Schritt im Prozess ist das Hinzufügen von jQuery-Code. Ich gehe davon aus, dass Sie jQuery heruntergeladen, auf Ihren Server hochgeladen und auf Ihrer Webseite darauf verwiesen haben.

Öffnen Sie als Nächstes eine weitere neue Javascript-Datei und referenzieren Sie sie in Ihrem HTML-Code wie jede normale Javascript-Datei,
und fügen Sie Folgendes hinzu:

Die erste funktion() lädt die darin enthaltenen Ereignisse, sobald das HTML-Dokument fertig ist. Wenn Sie zuvor in jQuery gearbeitet haben, entspricht die Funktion der Funktion document.ready von jQuery. Also fangen wir damit an und im Inneren haben wir unsere Klickfunktion, die beim Klicken auf die Senden-Schaltfläche mit dem Klassennamen "button" ausgeführt wird. Letztendlich ist das, was wir mit diesen Codezeilen erreicht haben, dasselbe, als würden wir der Schaltfläche einreichen im HTML-Code ein Ereignis onclick hinzufügen. Der Grund, warum wir dies mit jQuery tun, ist die saubere Trennung unserer Präsentation von unseren Skripten.


Schritt 3 - Schreiben Sie eine Formularvalidierung

In unserer Funktion, die geladen wird, wenn die Seite fertig ist, fügen wir eine Formularüberprüfung hinzu. Aber das erste, was Sie sehen, das hinzugefügt wurde, ist $('.error').hide();. Dadurch werden unsere 3 Labels mit dem Klassennamen "error" ausgeblendet. Wir möchten, dass diese Etiketten nicht nur wann ausgeblendet werden
Die Seite wird zuerst geladen, aber auch, wenn Sie auf Senden klicken, falls dem Benutzer zuvor eine der Nachrichten angezeigt wurde. Jede Fehlermeldung sollte nur angezeigt werden, wenn die Validierung nicht funktioniert.

Wir überprüfen, indem wir zuerst prüfen, ob das Namensfeld vom Benutzer leer gelassen wurde. Wenn dies der Fall ist, zeigen wir die Bezeichnung mit der id name_error an. Wir legen dann den Fokus auf das Namenseingabefeld, falls der Benutzer
ist überhaupt verwirrt darüber, was als nächstes zu tun ist! (Ich habe gelernt, nie zu viel anzunehmen, wenn es darum geht, Benutzer zu bilden).

Um genauer zu erklären, wie wir dies erreichen, setzen wir eine Variable 'name' auf den Wert des Eingabefelds mit der ID "name" -- alle mit einer Zeile von jQuery:

Wir prüfen dann, ob dieser Wert leer ist, und wenn ja, verwenden wir die show() -Methode von jQuery, um das Label mit anzuzeigen
id "name_error":

Als nächstes setzen wir den Formularfokus wieder auf das Eingabefeld mit der id von "name" und geben schließlich false zurück:

Stellen Sie sicher, dass Ihr Code false zurückgibt, da sonst das gesamte Formular gesendet wird (was nicht funktioniert
der Zweck dieses Tutorials)! Die Rückgabe false verhindert, dass der Benutzer weiter vorgeht
ohne die erforderlichen Feld(e) auszufüllen.


Schritt 4 - Verarbeiten Sie unsere Formularübermittlung mit der AJAX-Funktion von jQuery

Jetzt kommen wir zum Kern des Tutorials: Senden Sie unser Formular ohne Seitenaktualisierung, wodurch die Formularwerte an ein PHP-Skript im Hintergrund gesendet werden. Schauen wir uns zuerst den gesamten Code an, dann werde ich als nächstes näher darauf eingehen. Fügen Sie den folgenden Code direkt unter dem zuvor hinzugefügten Validierungs-Snippet hinzu (und bevor die Schaltfläche-Klick-Funktion geschlossen wird):

Hier ist viel los! Lassen Sie uns alles zusammenfassen - es ist so einfach und benutzerfreundlich, sobald Sie den Prozess verstanden haben. Wir erstellen zuerst eine Zeichenfolge von Werten. Dies sind alle Formularwerte, die wir an das Skript weitergeben möchten, das die E-Mail sendet.

Wir hatten zuvor eine Variable 'name' mit dem Wert des Eingabefeldes mit der ID "name" wie folgt festgelegt:

Wir können diesen 'name'-Wert sowie die' email'- und 'phone'-Werte erneut verwenden, um unseren dataString zu erstellen:

Ich habe eine Warnung auskommentiert, die ich manchmal verwende, um sicherzugehen, dass ich die richtigen Werte erhalte, die Sie möglicherweise hilfreich finden. Wenn Sie diese Warnung auskommentieren und Ihr Formular testen, vorausgesetzt, alles ist bisher richtig gelaufen, sollten Sie eine Meldung erhalten, die der folgenden ähnelt:

Jetzt kommen wir zu unserer Haupt-Ajax-Funktion, dem Star der heutigen Show. Hier findet die ganze Aktion statt, also zahlen Sie
Aufmerksamkeit!

Grundsätzlich geschieht im Code Folgendes: Die Funktion .ajax() verarbeitet die Werte aus unserer Zeichenfolge dataString (data:dataString) mit einem PHP-Skript namens process.php (url:"bin/process.php") unter Verwendung von die 'POST'-Methode (type:"POST"). Wenn unser Skript erfolgreich verarbeitet wurde, können wir dem Benutzer eine Nachricht anzeigen und schließlich false zurückgeben, damit die Seite nicht neu geladen wird. Das ist es! Der gesamte Prozess wird genau dort in diesen wenigen Zeilen abgewickelt!

Es gibt fortgeschrittenere Dinge, die Sie hier tun können, außer eine E-Mail zu senden und eine Erfolgsmeldung zu geben. Sie können beispielsweise Ihre Werte an eine Datenbank senden, sie verarbeiten und die Ergebnisse dann dem Benutzer wieder anzeigen. Wenn Sie also eine Umfrage an Benutzer gesendet haben, können Sie deren Abstimmung verarbeiten und dann die Abstimmungsergebnisse zurückgeben, ohne dass eine Seitenaktualisierung erforderlich ist.

Lassen Sie uns zusammenfassen, was in unserem Beispiel passiert ist, um sicherzugehen, dass wir alles abgedeckt haben. Wir haben unsere Formularwerte mit jQuery abgerufen und diese dann in eine Zeichenfolge wie folgt eingefügt:

Dann haben wir die Ajax-Funktion von jQuery verwendet, um die Werte im dataString zu verarbeiten. Nachdem
der Prozess erfolgreich abgeschlossen wird, zeigen wir dem Benutzer eine Nachricht zurück und fügen return false hinzu, damit unsere Seite nicht aktualisiert wird:

Der Erfolgsteil des Skripts wurde mit bestimmten Inhalten gefüllt, die dem Benutzer wieder angezeigt werden können. Aber was unsere Ajax-Funktionalität angeht, ist das alles. Weitere Optionen und Einstellungen finden Sie in der Dokumentation von jQuery zur Ajax-Funktion. Das Beispiel hier ist eine der einfacheren Implementierungen, aber dennoch ist es sehr leistungsfähig, wie Sie sehen können.


Schritt 5 - Zeigen Sie dem Benutzer eine Nachricht zurück

Schauen wir uns kurz den Teil des Codes an, der dem Benutzer unsere Nachricht zurückgibt, um das Tutorial abzuschließen.

Zuerst ändern wir den gesamten Inhalt des div contact_form (denken Sie daran, ich sagte, wir würden dieses div benötigen) mit der folgenden Zeile:

Dabei wurde der gesamte Inhalt des div contact_form mithilfe der html() - Funktion von jQuery ersetzt. Anstelle eines Formulars haben wir jetzt nur ein neues Div mit der id "message". Als nächstes füllen wir dieses Div mit einer tatsächlichen Nachricht -- einem h2 mit der Aufschrift "Contact Form Submitted":

Als nächstes fügen wir dem Nachrichtendiv mit der Funktion append() von jQuery noch mehr Inhalt hinzu. Um das Ganze abzurunden, fügen wir einen coolen Effekt hinzu, indem wir das Nachrichtendiv mit der Funktion jQuery hide() ausblenden und dann alles mit fadeIn() einblenden. Funktion:

Nach dem Absenden des Formulars wird dem Benutzer Folgendes angezeigt:

Ich denke, Sie müssen jetzt zustimmen, dass es unglaublich einfach ist, Formulare ohne Seitenaktualisierung mit der leistungsstarken Ajax-Funktion von jQuery einzureichen. Holen Sie sich einfach die Werte in Ihre Javascript-Datei, verarbeiten Sie sie mit der Ajax-Funktion und geben Sie false zurück, und schon kann es losgehen. Sie können die Werte in Ihrem PHP-Skript wie in jeder anderen PHP-Datei verarbeiten. Der einzige Unterschied besteht darin, dass der Benutzer nicht auf eine Seitenaktualisierung warten muss - alles geschieht im Hintergrund.

Wenn Sie also ein Kontaktformular auf Ihrer Website, ein Anmeldeformular oder noch weiter fortgeschrittene Formulare haben, die Werte über eine Datenbank verarbeiten und Ergebnisse zurückrufen, können Sie dies alles einfach und effizient tun und vor allem den Endbenutzer verbessern Erleben Sie Ihre Website, indem Sie Interaktivität bereitstellen, ohne darauf warten zu müssen, dass die Seite neu geladen wird.

Abschluss

Ich möchte noch einige abschließende Worte zum bereitgestellten Demo-Beispiel hinzufügen. In der Demo stellen Sie möglicherweise fest, dass tatsächlich ein Plugin verwendet wird - die Datei runonload.js. Ich habe zu Beginn des Tutorials angegeben, dass wir keine Plugins verwenden würden, und dann finden Sie in der Demo ein zusätzliches Runonload-Skript, daher ist möglicherweise eine Erklärung erforderlich! Für alle, die an einer Live-Demo interessiert sind, können Sie das SEO-Beratungsformular meiner Website einsehen.

Die einzige Verwendung, die ich mit runonload gemacht habe, hat eigentlich nichts mit der Verarbeitung des Formulars zu tun. So können Sie die Ajax-Funktionen vollständig ohne zusätzliche Plugins ausführen. Ich habe runonload nur verwendet, um das Namenseingabefeld auf das Laden von Seiten zu konzentrieren. Ich habe die Erfahrung gemacht, dass das Aufrufen von runonload manchmal ein besserer Ersatz für die native Dokumentbereitschaftsfunktion von jQuery ist, und ich habe festgestellt, dass dies beim Zusammenstellen dieses Lernprogramms der Fall ist. Aus irgendeinem Grund funktionierte die Funktion focus() beim Laden von Seiten mit der nativen Dokumentbereitschaftsfunktion von jQuery nicht - sie funktionierte jedoch mit runonload, weshalb Sie sie als Teil des Beispiels finden. Wenn Sie also einen Weg kennen, dies ohne Runonload zu erreichen, würde ich mich freuen, von Ihnen darüber zu hören.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.