Share
Zuvor auf Nettuts + zeigte Philo, wie Sie mit jQuery WordPress-Kommentaren eine Formularvalidierung hinzufügen können, die ohne das Neuladen von Seiten funktioniert. Eine weitere großartige Möglichkeit, jQuery zur Verbesserung der Benutzererfahrung zu nutzen, besteht darin, das Formular nicht nur zu überprüfen, sondern vollständig ohne Seitenaktualisierung zu senden.
In diesem Tutorial zeige ich Ihnen, wie einfach es ist, dies zu tun. Senden Sie ein Kontaktformular, das eine E-Mail sendet, ohne die Seiten mit jQuery zu aktualisieren! (Die eigentliche E-Mail wird mit einem PHP-Skript gesendet, das im Hintergrund verarbeitet wird.) Lass uns anfangen.
Wenn Sie eine fertige Lösung wünschen, probieren Sie das ultimative PHP-, HTML5- und AJAX-Kontaktformular aus oder durchsuchen Sie die anderen Formularskripts, die auf Envato Market zum Verkauf angeboten werden.
Bilden Sie Skripts und Plugins, die auf Envato Market zum Verkauf angeboten werden In diesem Beispiel haben wir ein einfaches Kontaktformular mit Name, E-Mail-Adresse und Telefonnummer. Das Formular übergibt alle Felder ohne Seitenaktualisierung an ein PHP-Skript. Dabei werden native jQuery-Funktionen verwendet (native Bedeutung, Sie müssen keine zusätzlichen Plugins herunterladen, damit es funktioniert.
Wenn Sie diesen Artikel ohne vorherige Kenntnis von jQuery gefunden haben, wäre ein guter Einstieg der Artikel von Jeffrey Way über 15 Ressourcen, mit dem Sie mit jQuery From Scratch beginnen können.
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, die das gesamte Formular umgibt.
Verpassen Sie dieses div nicht in Ihrer eigenen Form, da wir dieses wrapper div später benötigen werden. Sie
Ich könnte auch feststellen, dass ich sowohl die Aktion als auch die Methodenteile des Formular-Tags leer gelassen habe. Wir
Eigentlich brauche ich das hier nicht, weil jQuery sich später um alles kümmert.
Eine weitere wichtige Sache, die Sie mit einschließen müssen, ist die ID-Werte für jedes Eingabefeld. Die ID-Werte
Nach diesem jQuery-Skript wird das Formular mit verarbeitet.
Ich habe einige CSS-Stile und ein Hintergrundbild in Photoshop hinzugefügt, um das folgende Formular zu erstellen:
Der nächste Schritt ist das Hinzufügen von jQuery-Code. Ich gehe davon aus, dass Sie jQuery heruntergeladen, auf Ihren Server hochgeladen haben und auf Ihre Webseite verweisen.
Als nächstes öffnen Sie eine weitere neue Javascript-Datei. Verweisen Sie sie in Ihrer HTML-Datei wie eine normale Javascript-Datei,
und füge folgendes hinzu:
Accentsconagua
$ (function () $ (". button"). click (function () // Formular hier validieren und verarbeiten);); Was die erste Funktion () tut, lädt sie die Ereignisse, sobald das HTML-Dokument fertig ist. Wenn Sie zuvor mit jQuery gearbeitet haben, entspricht die Funktion der Funktion document.ready von jQuery. Wir beginnen also damit, und im Inneren haben wir unsere Klick-Funktion, die beim Klicken auf die Schaltfläche "Senden" mit dem Klassennamen "Button" ausgeführt wird. Was wir mit diesen Codezeilen erreicht haben, ist letztlich dasselbe, als würden wir dem Submit-Button in der HTML-Datei ein Onclick-Ereignis hinzufügen. Der Grund, warum wir es mit jQuery machen, ist die saubere Trennung unserer Präsentation von unseren Skripten.
$ (function () $ ('. error'). hide (); $ (". button"). click (function () // Formular hier validieren und verarbeiten $ ('. error'). hide () var name = $ ("input # name"). val (); if (name == "") $ ("label # name_error"). show (); $ ("input # name"). focus ( ); return false; var email = $ ("input # email"). val (); if (email == "") $ ("label # email_error"). show (); $ ("input # email ") .focus (); return false; var phone = $ (" input # phone "). val (); if (phone ==" ") $ (" label # phone_error "). show (); $ ("input # phone"). focus (); return false;);); In unserer Funktion, die geladen wird, wenn die Seite fertig ist, fügen wir eine Formularvalidierung hinzu. Aber das erste, was Sie sehen, das hinzugefügt wurde, ist $ ('. Error'). Hide () ;. Was dies bedeutet, verbirgt unsere 3 Labels mit dem Klassennamen "error". Wir möchten, dass diese Etiketten nicht nur dann 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 Überprüfung nicht erfolgreich ist.
Wir überprüfen, indem wir zunächst prüfen, ob das Namensfeld vom Benutzer leer gelassen wurde. Wenn dies der Fall ist, zeigen wir das Label mit der ID name_error an. Wir legen dann den Fokus auf das Namenseingabefeld, falls der Benutzer dies tut
ist überhaupt verwirrt, was als nächstes zu tun ist! (Ich habe gelernt, nie zu viel anzunehmen, wenn es darum geht, Benutzer zu bilden).
Um dies genauer zu erläutern, setzen wir eine Variable 'name' auf den Wert des Eingabefelds mit der ID "name" - alles mit einer Zeile von jQuery:
var name = $ ("eingabe # name"). val (); Wir prüfen dann, ob der Wert leer ist. Wenn dies der Fall ist, verwenden wir die show () - Methode von jQuery, um das Label mit anzuzeigen
id "name_error":
if (name == "") $ ("label # name_error"). show (); Als Nächstes setzen wir den Formularfokus wieder auf das Eingabefeld mit der ID "Name" und geben schließlich false zurück:
if (name == "") $ ("label # name_error"). show (); $ ("eingabe # name"). focus (); falsch zurückgeben; Vergewissern Sie sich, dass in Ihrem Code false zurückgegeben wird. Andernfalls wird das gesamte Formular gesendet (was das besiegt.)
Zweck dieses Tutorials)! Was falsch ist, bedeutet, dass der Benutzer nicht weiter fortfahren kann
ohne die erforderlichen Felder auszufüllen.
Jetzt kommen wir zum Kern des Tutorials - das Senden unseres Formulars ohne Seitenaktualisierung, das die Formularwerte an ein PHP-Skript im Hintergrund sendet. Schauen wir uns zuerst den gesamten Code an, dann werde ich als nächstes detaillierter aufgehen. Fügen Sie den folgenden Code direkt unter dem zuvor hinzugefügten Validierungs-Snippet hinzu (und bevor die Schaltfläche zum Klicken auf die Schaltfläche geschlossen wird):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); return false; $ .ajax (Typ: "POST", URL: "bin / process.php"), data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Kontaktformular wurde übermittelt!
") .append ("Wir werden bald in Kontakt treten.
") .hide () .fadeIn (1500, function () $ ('# message'). anhängen ("
"); ); ); falsch zurückgeben; Wir haben hier viel vor! Lassen Sie uns alles auf den Punkt bringen - es ist so einfach und so einfach zu bedienen, wenn Sie den Prozess verstanden haben. Zuerst erstellen wir eine Zeichenfolge von Werten. Dies sind alle Formularwerte, die wir an das Skript übergeben möchten, das die E-Mail sendet.
Wir erinnern uns vorher, dass wir eine Variable 'name' mit dem Wert des Eingabefelds mit der ID "name" festgelegt hatten, wie folgt:
"); ); ); falsch zurückgeben; var name = $ ("eingabe # name"). val (); Wir können diesen 'name'-Wert erneut sowie die' email '- und die' phone'-Werte verwenden, um unseren dataString zu erstellen:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
Ich habe eine Warnung auskommentiert, die ich manchmal verwende, um sicher zu sein, dass ich die richtigen Werte ergreife, die Sie möglicherweise als hilfreich erachten. Wenn Sie die Warnung auskommentieren und Ihr Formular testen, vorausgesetzt, dass bisher alles korrekt ausgeführt wurde, sollten Sie eine Meldung erhalten, die der folgenden ähnelt:
Nun kommen wir zu unserer Haupt-Ajax-Funktion, dem Star der heutigen Show. Hier passiert alles, also zahlen Sie
Aufmerksamkeit schenken!
$ .ajax (Typ: "POST", URL: "bin / process.php", data: dataString, success: function () // Nachricht an Benutzer hier zurückgeben); falsch zurückgeben;
Grundsätzlich geht es im Code um Folgendes: Die .ajax () -Funktion verarbeitet die Werte aus unserem String namens dataString (data: dataString) mit einem PHP-Skript namens process.php (URL: "bin / process.php") mit die 'POST'-Methode (Typ: "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 erneut geladen wird. Das ist es! In diesen wenigen Zeilen wird der gesamte Prozess genau dort abgewickelt!
Sie können hier fortgeschrittenere Dinge tun, außer eine E-Mail zu senden und eine Erfolgsmeldung zu senden. Sie können beispielsweise Ihre Werte an eine Datenbank senden, sie verarbeiten und die Ergebnisse dann dem Benutzer anzeigen. Wenn Sie also eine Umfrage an Benutzer gesendet haben, können Sie ihre Abstimmung bearbeiten und dann die Abstimmungsergebnisse zurückgeben, ohne dass eine Aktualisierung der Seite erforderlich ist.
Fassen wir zusammen, was in unserem Beispiel passiert ist, um sicher zu sein, dass wir alles abgedeckt haben. Wir haben unsere Formularwerte mit jQuery übernommen und diese dann in eine Zeichenfolge wie folgt eingefügt:
var name = $ ("eingabe # name"). val (); var email = $ ("input # email"). val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Dann haben wir die Ajax-Funktion von jQuery verwendet, um die Werte im dataString zu verarbeiten. Nachdem
Der Prozess wird erfolgreich abgeschlossen. Wir zeigen dem Benutzer eine Nachricht an und fügen zurück false hinzu, damit unsere Seite nicht aktualisiert wird:
$ .ajax (Typ: "POST", URL: "bin / process.php"), data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Kontaktformular wurde übermittelt!
") .append ("Wir werden bald in Kontakt treten.
") .hide () .fadeIn (1500, function () $ ('# message'). anhängen (""); ); ); falsch zurückgeben; Der Erfolgsteil des Skripts wurde mit bestimmten Inhalten gefüllt, die dem Benutzer wieder angezeigt werden können. Was unsere Ajax-Funktionalität angeht, ist dies alles. Weitere Optionen und Einstellungen finden Sie in der jQuery-Dokumentation zur ajax-Funktion. Das Beispiel hier ist eine der einfacheren Implementierungen, aber trotzdem ist es sehr mächtig, wie Sie sehen können.
Lassen Sie uns einen kurzen Blick auf den Teil des Codes werfen, in dem unsere Nachricht dem Benutzer angezeigt wird, um das Lernprogramm abzuschließen.
Zuerst ändern wir den gesamten Inhalt des contact_form div (denken Sie daran, ich sagte, wir würden dieses div brauchen) mit der folgenden Zeile:
$ ('# contact_form'). html (""); Was dabei getan wurde, ist, den gesamten Inhalt von contact_form div mithilfe der html () - Funktion von jQuery zu ersetzen. Anstelle eines Formulars haben wir jetzt nur noch ein neues div mit der ID von 'message'. Als Nächstes füllen wir dieses Div mit einer tatsächlichen Nachricht - ein h2 mit der Aufschrift "Contact Form Submitted":
$ ('# message'). html ("Kontaktformular wurde übermittelt!
") Als Nächstes fügen wir der Nachricht div mit der Funktion append () der jQuery-Funktion noch mehr Inhalt hinzu. Um das Ganze abzurunden, fügen Sie einen coolen Effekt hinzu, indem Sie die Nachricht div mit der Funktion jQuery hide () ausblenden. Funktion:
.anhängen ("Wir werden bald in Kontakt treten.
") .hide () .fadeIn (1500, function () $ ('# message'). anhängen ("");); So sieht der Benutzer nach dem Absenden des Formulars Folgendes:
Ich denke, Sie müssen mir jetzt zustimmen, dass es unglaublich einfach ist, Formulare ohne Seitenaktualisierung mithilfe der leistungsstarken Ajax-Funktion von jQuery zu übermitteln. Holen Sie sich einfach die Werte in Ihre Javascript-Datei, verarbeiten Sie sie mit der Ajax-Funktion und geben Sie false zurück, und Sie können loslegen. Sie können die Werte in Ihrem PHP-Skript wie jede andere PHP-Datei verarbeiten. Der einzige Unterschied besteht darin, dass der Benutzer nicht auf eine Seitenaktualisierung warten muss - alles geschieht im Hintergrund im Hintergrund.
Wenn Sie also ein Kontaktformular auf Ihrer Website, ein Anmeldeformular oder sogar fortgeschrittene Formulare haben, die Werte über eine Datenbank verarbeiten und die Ergebnisse zurückholen, können Sie dies alles einfach und effizient erledigen. Am wichtigsten ist jedoch, dass Sie den Endbenutzer verbessern Erleben Sie Ihre Website, indem Sie Interaktivität bereitstellen, ohne auf das erneute Laden der Seite warten zu müssen.
Ich möchte noch ein paar 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 bereits zu Beginn des Tutorials erklärt, 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 sich für eine Live-Demo interessieren, können Sie sich das SEO-Beratungsformular meiner Website anzeigen lassen.
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 komplett ohne zusätzliche Plugins ausführen. Ich habe nur runonload verwendet, um das Namenseingabefeld auf das Laden der Seite zu fokussieren. 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 Erstellen dieses Lernprogramms der Fall ist. Aus irgendeinem Grund funktionierte die focus () - Funktion nicht mit dem Laden von Seiten mit der systemeigenen Dokumentbereitschaftsfunktion von jQuery. Sie funktionierte jedoch mit runonload. Aus diesem Grund finden Sie es als Teil des Beispiels. Wenn Sie also wissen, wie Sie dies ohne Runonload erreichen können, würde ich mich freuen, von Ihnen darüber zu erfahren.
Wir haben ein umfassendes Handbuch zusammengestellt, mit dessen Hilfe Sie JavaScript erlernen können, egal ob Sie gerade erst als Web-Entwickler anfangen oder sich mit fortgeschrittenen Themen befassen möchten.
