Share
Tidigare på Nettuts + visade Philo hur du kan använda jQuery för att lägga till formulärvalidering till wordpress-kommentarer som fungerar utan att någon sida omlastas. Ett annat bra sätt att utnyttja jQuery för att förbättra användarupplevelsen är att inte bara validera, utan att skicka in din formulär helt utan att uppdatera sidan.
I den här handledningen visar jag hur lätt det är att göra just det - skicka en kontaktformulär som skickar ett mail, utan siduppdatering med jQuery! (Den faktiska e-postmeddelandet skickas med ett php-skript som behandlar i bakgrunden). Låt oss börja.
Om du vill ha en färdig lösning, kan du prova formuläret Ultimate PHP, HTML5 & AJAX, eller bläddra i andra formulärskript till salu på Envato Market.
Form skript och plugins till salu på Envato Market I det här exemplet har vi ett enkelt kontaktformulär med namn, e-post och telefonnummer. Formuläret skickar alla fält till ett php-skript utan siduppdatering, med inbyggda jQuery-funktioner (inhemsk mening, du behöver inte ladda ner några extra plugins för att få det att fungera.
Om du har hittat den här artikeln utan föregående förtrogenhet med jQuery, skulle ett bra ställe att komma igång vara Jeffrey Ways artikel om 15 resurser för att komma igång med jQuery From Scratch.
Låt oss ta en titt på vår HTML-markup. Vi börjar med vår grundläggande html-formulär:
Du kanske märker att jag har inkluderat en div med idkontakt_form som bryter runt hela formuläret.
Var noga med att inte sakna den diven i din egen form, eftersom vi kommer att behöva den här inpackningsdelen senare. Du
kan också märka att jag har lämnat både åtgärden och metoddelarna på blankettens tagg blank. Vi
faktiskt behöver inte någon av dessa här, för att jQuery tar hand om allt senare.
En annan viktig sak att vara säker på att inkludera är id-värdena för varje inmatningsfält. ID-värdena
är vad ditt jQuery-skript letar efter för att bearbeta formuläret med.
Jag har lagt till några css-format och en bakgrundsbild i Photoshop för att skapa följande formulär:
Nästa steg i processen är att lägga till en jQuery-kod. Jag antar att du har laddat ner jQuery, laddat upp till din server och refererar den till din webbsida.
Öppna sedan en annan ny javascriptfil, hänvisa den till din HTML-fil som du vill ha en vanlig javascriptfil,
och lägg till följande:
Accentsconagua
$ (funktion () $ (". knapp"). klicka (funktion () // validera och bearbeta formulär här);); Vad den första funktionen () gör är att den laddar händelserna inuti, så snart html-dokumentet är klart. Om du har gjort något jobb i jQuery tidigare är funktionen samma som jQuery's document.ready-funktion. Så vi börjar med det, och inuti har vi vår klickfunktion som körs på att klicka på Submit-knappen med klassnamnet "knappen". I slutändan är det som vi har åstadkommit med dessa linjer kod samma som om vi skulle lägga till en onclick-händelse på Submit-knappen i html. Anledningen till att vi gör det med jQuery är för ren separation av vår presentation från våra skript.
$ (funktion () $ ('.fel'). hide (); $ (".knapp"). klicka (funktion () // validera och bearbeta formulär här $ ('error') ; var name = $ ("input # name") .val (); if (name == "") $ ("label # name_error"). visa (); $ ("input # name"). ), return false; var email = $ ("input # email") .val (); om (email == "") $ ("label # email_error"). val (); om (phone == "") $ ("label # phone_error"). visa (); $ ("ingång # telefon"). fokus (); returnera false;);); Inom vår funktion som laddas när sidan är klar lägger vi till någon formvalidering. Men det första du ser som har lagts till är $ ('. Error'). Hide () ;. Vad detta gör är att dölja våra 3 etiketter med klassnamn "fel". Vi vill att dessa etiketter ska gömmas inte bara när
sidan laddas först, men också när du klickar på Skicka, om ett av meddelandena visades till användaren tidigare. Varje felmeddelande ska bara visas om validering inte fungerar.
Vi validerar genom att först kontrollera om namnfältet lämnades tomt av användaren, och om det är så visar vi etiketten med namn_error-id. Vi lägger sedan fokus på namninmatningsfältet, om användaren
är alls förvirrad om vad man ska göra nästa! (Jag har lärt mig aldrig att anta för mycket när det gäller att bilda användare).
För att förklara mer detaljerat hur vi gör detta händer ställer vi in en variabel "namn" till värdet av inmatningsfältet med id "namn" - allt med en rad jQuery:
var name = $ ("input # name") .val (); Vi kontrollerar då om värdet är tomt och om det är så använder vi jQuery's show () -metod för att visa etiketten med
id "name_error":
om (namn == "") $ ("label # name_error"). visa (); Därefter lägger vi formulärets fokus tillbaka på inmatningsfältet med id för "namn", och slutligen returnerar falskt:
om (namn == "") $ ("label # name_error"). visa (); . $ ( "Input # name") fokus (); returnera false; Var säker på att du har returnerat fel i din kod, annars kommer hela blanketten att skickas in (vilket besegrar
syftet med denna handledning)! Vad returnerar falskt gör det att det hindrar användaren från att gå vidare
utan att fylla i de obligatoriska fälten.
Nu kommer vi till hjärtat av handledningen - skickar in vår blankett utan siduppdatering, som skickar formvärdena till ett php-skript i bakgrunden. Låt oss ta en titt på all kod först och sedan kommer jag att bryta ner i mer detalj nästa. Lägg till följande kod strax under det valideringsbrev som vi lagt till tidigare (och innan knappens klickfunktion är stängd):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); returnera false; $ .ajax (typ: "POST", url: "bin / process.php", data: dataString, framgång: funktion () $ ('# contact_form'). html"); $ ('# message'). html ("Kontaktformulär Inlämnad!
") .append ("vi hör av oss snart.
") .hide () .fadeIn (1500, funktion () $ ('# message'). append ("
"););); returnera false; Vi har mycket på gång här! Låt oss bryta ner det hela - det är så enkelt och så enkelt att använda när du förstår processen. Vi skapar först en sträng värden, som är alla formvärden som vi vill vidarebefordra till det skript som skickar e-postmeddelandet.
Minns tidigare, hade vi satt en variabel "namn" med värdet av inmatningsfältet med id "namn", som så:
"););); returnera false; var name = $ ("input # name") .val (); Vi kan använda det "namnvärdet" igen, liksom "email" och "phone" -värdena, för att skapa vår dataString:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
Jag har kommenterat en varning som jag ibland använder för att vara säker på att jag tar de rätta värdena, vilket du kan hitta till hjälp i processen. Om du inte kommenterar det varning och testa ditt formulär, förutsatt att allting har gått till höger så borde du få ett meddelande som liknar följande:
Nu kommer vi till vår huvudsakliga ajax-funktion, stjärnan i dagens show. Här är all åtgärd som händer, så betala
extra uppmärksamhet!
$ .ajax (typ: "POST", url: "bin / process.php", data: dataString, framgång: funktion () // visa meddelande tillbaka till användaren här); returnera false;
Vad som händer i koden är det här: Funktionen .ajax () bearbetar värdena från vår sträng som heter dataString (data: dataString) med ett php-skript som heter process.php (url: "bin / process.php") "POST" -metoden (typ: "POST"). Om vårt skript behandlas framgångsrikt kan vi sedan visa ett meddelande tillbaka till användaren och slutligen återvända falskt så att sidan inte laddas om. Det är allt! Hela processen hanteras precis där i dessa få linjer!
Det finns mer avancerade saker du kan göra här, annat än att skicka ett mail och ge ett succémeddelande. Till exempel kan du skicka dina värden till en databas, bearbeta dem och sedan visa resultaten tillbaka till användaren. Så om du skickade en omröstning till användare, kan du behandla sin röst, så returnera röstresultatet, allt utan någon uppdatering av sidan.
Låt oss sammanfatta vad som hände i vårt exempel, för att vara säker på att vi har täckt allt. Vi tog våra formvärden med jQuery och placerade dem sedan i en sträng så här:
var name = $ ("input # name") .val (); var email = $ ("input # email") .val (); var phone = $ ("input # phone") .val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Sedan använde vi jQuery's ajax-funktion för att bearbeta värdena i dataString. Efter det
processen avslutas framgångsrikt, vi visar ett meddelande tillbaka till användaren och lägger till returfalsk så att vår sida inte uppdateras:
$ .ajax (typ: "POST", url: "bin / process.php", data: dataString, framgång: funktion () $ ('# contact_form'). html"); $ ('# message'). html ("Kontaktformulär Inlämnad!
") .append ("vi hör av oss snart.
") .hide () .fadeIn (1500, funktion () $ ('# message'). append (""););); returnera false; Succesdelen av manuset har fyllts i med ett visst innehåll som kan visas tillbaka till användaren. Men så långt som vår ajax-funktionalitet går, är allt det som finns till det. För fler alternativ och inställningar var noga med att kolla in jQuerys dokumentation på ajax-funktionen. Exemplet här är en av de enklare implementationerna, men det är ändå mycket kraftfullt som du kan se.
Låt oss kortfattat titta på den del av koden som visar vårt meddelande tillbaka till användaren, för att slutföra handledningen.
Först ändrar vi hela innehållet i contact_form div (kom ihåg jag sa att vi skulle behöva den div) med följande rad:
$ (# CONTACT_FORM). Html (""); Vad som har gjort är att ersätta allt innehåll i kontaktsidan div, med jQuery's html () -funktion. Så istället för ett formulär har vi nu bara en ny div inuti, med ID för "meddelande". Därefter fyller vi den div med ett verkligt meddelande - en h2 säger "Kontaktformulär Inlämnad":
$ (# Meddelandet "). Html ("Kontaktformulär Inlämnad!
") Sedan lägger vi till ännu mer innehåll i meddelandevisionen med jQuery's append () -funktion, och för att lägga allt på, lägger vi till en cool effekt genom att gömma meddelandevisionen med funktionen jQuery hide (), sedan blekna det hela med fadeIn () fungera:
.bifoga("vi hör av oss snart.
") .hide () .fadeIn (1500, funktion () $ ('# message'). append ("");); Så slutar användaren se följande när de skickar in formuläret:
Nu tror jag att du måste hålla med om att det är otroligt enkelt att skicka blanketter utan siduppdatering med jQuerys kraftfulla ajax-funktion. Få bara värdena i din javascript-fil, bearbeta dem med ajax-funktionen och returnera falsk, och du är bra att gå. Du kan bearbeta värdena i ditt php-skript precis som du skulle ha någon annan php-fil, den enda skillnaden är att användaren inte behöver vänta på en siduppdatering - allt händer tyst i bakgrunden.
Så om du har en kontaktformulär på din webbplats, ett inloggningsformulär eller ännu mer avancerade formulär som behandlar värden via en databas och hämtar resultaten, kan du göra det helt enkelt och effektivt, och kanske viktigast, du förbättrar slutanvändaren erfarenhet av din webbplats genom att ge interaktivitet utan att behöva vänta på att sidan ska laddas om.
Jag skulle vilja lägga till några sista ord om det givna demonstrationsexemplet. I demo kan du märka att det faktiskt finns ett plugin som används - filen runonload.js. Jag meddelade i början av handledningen att vi inte skulle använda några plugins, och då hittar du i demo finns det ett extra runonload-skript, så en förklaring kan vara nödvändig! För alla som är intresserade av att se en live-fungerande demo kan du se min webbplatss SEO-konsultform.
Den enda användningen jag gjorde med runonload har faktiskt inget att göra med att bearbeta formuläret. Så du kan utföra ajaxfunktionerna helt utan några extra plugins. Jag använde bara runonload för att fokusera namninmatningsfältet på sidbelastning. Det har varit min upplevelse att ringande runonload ibland kan vara en bättre ersättning för jQuery's native document ready-funktion, och jag fann att det var fallet när du sammanfattade denna handledning. Av en eller annan anledning skulle fokusfunktionen () inte fungera på sidbelastning med jQuerys inbyggda dokument redo funktion - men det fungerade med runonload, och det är därför du hittar det som en del av exemplet. Så om du vet om ett sätt att uppnå det utan att använda runonload skulle jag gärna höra från dig om det.
Vi har byggt en komplett guide för att hjälpa dig att lära dig JavaScript, oavsett om du precis börjat som webbutvecklare eller vill utforska mer avancerade ämnen.
