Share
Eerder op Nettuts + toonde Philo hoe je jQuery kunt gebruiken om formuliervalidatie toe te voegen aan WordPress-reacties die werkt zonder enige herladen van de pagina. Een andere geweldige manier om jQuery te gebruiken om de gebruikerservaring te verbeteren, is om niet alleen te valideren, maar om je formulier volledig in te dienen zonder een pagina te verversen.
In deze zelfstudie laat ik u zien hoe eenvoudig het is om dat te doen: een contactformulier verzenden dat een e-mail verzendt, zonder pagina vernieuwen met jQuery! (De daadwerkelijke e-mail wordt verzonden met een php-script dat op de achtergrond wordt verwerkt). Laten we beginnen.
Als u een kant-en-klare oplossing wilt, probeer dan het Ultimate PHP-, HTML5 & AJAX-contactformulier of blader door de andere formulierscripts te koop op Envato Market.
Formulierscripts en plug-ins te koop op Envato Market In dit voorbeeld hebben we een eenvoudig contactformulier met naam, e-mailadres en telefoonnummer. Het formulier verzendt alle velden naar een php-script zonder pagina vernieuwen, met behulp van native jQuery-functies (native betekenis, u hoeft geen extra plug-ins te downloaden om deze te laten werken.
Als u dit artikel zonder enige voorafgaande vertrouwdheid met jQuery hebt gevonden, zou een geweldige plaats om te beginnen Jeffrey Way's artikel over 15 bronnen zijn om u op weg te helpen met jQuery From Scratch.
Laten we eens kijken naar onze html-markup. We beginnen met ons basishulpformulier:
Het is je misschien opgevallen dat ik een div met id-contactformulier heb bijgevoegd dat zich om het hele formulier heen wikkelt.
Zorg dat je die div niet mist in je eigen vorm, omdat we later deze wrapper div nodig hebben. U
kan ook opmerken dat ik zowel de actie als de methodedelen van de form tag blanco heb gelaten. Wij
eigenlijk heb je geen van deze hier nodig, want jQuery zorgt er later voor.
Een ander belangrijk ding om zeker te zijn, is de id-waarden voor elk invoerveld. De id-waarden
zijn waar uw jQuery-script naar op zoek is om het formulier te verwerken.
Ik heb een aantal CSS-stijlen en een achtergrondafbeelding in Photoshop toegevoegd om de volgende vorm te produceren:
De volgende stap in het proces is het toevoegen van een aantal jQuery-code. Ik ga ervan uit dat je jQuery hebt gedownload, naar je server hebt geüpload en ernaar verwijst in je webpagina.
Open vervolgens nog een nieuw javascript-bestand, verwijs het in uw html zoals u een normaal javascript-bestand zou gebruiken,
en voeg het volgende toe:
Accentsconagua
$ (functie () $ (". -knop"). klik (functie () // formulier valideren en verwerken hier);); Wat de eerste functie () doet, is dat het de gebeurtenissen binnenin laadt, zodra het html-document gereed is. Als u al eerder werk in jQuery hebt gedaan, is de functie hetzelfde als de document.ready-functie van jQuery. Dus we beginnen daarmee en binnen hebben we onze klikfunctie die wordt uitgevoerd door te klikken op de verzendknop met de klassenaam 'knop'. Uiteindelijk is wat we hebben bereikt met deze coderegels hetzelfde als wanneer we een onclick-gebeurtenis zouden toevoegen aan de submit-knop in de html. De reden dat we het doen met jQuery is voor een schone scheiding van onze presentatie van onze scripts.
$ (function () $ ('. error'). hide (); $ (". button"). klik (functie () // formulier valideren en verwerken hier $ ('. 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;);); Binnen onze functie die wordt geladen wanneer de pagina gereed is, voegen we enige vormvalidatie toe. Maar het eerste wat je ziet is dat $ ('. Error'). Hide (); Wat dit doet, verbergt onze 3 labels met class name "error". We willen dat deze labels niet alleen worden verborgen
de pagina wordt eerst geladen, maar ook wanneer u op verzenden klikt, voor het geval een van de berichten eerder aan de gebruiker werd getoond. Elke foutmelding zou alleen moeten verschijnen als de validatie niet lukt.
We valideren door eerst te controleren of het naamveld leeg is gelaten door de gebruiker en als dit het geval is, tonen we het label met id of name_error. Vervolgens plaatsen we de focus op het invoerveld naam, voor het geval de gebruiker
is helemaal niet duidelijk wat de volgende stap is! (Ik heb geleerd om nooit te veel op te nemen als het gaat om het vormen van gebruikers).
Om meer in detail uit te leggen hoe we dit doen, stellen we een variabele 'naam' in op de waarde van het invoerveld met id 'naam' - allemaal met één regel jQuery:
var name = $ ("input # name"). val (); We controleren vervolgens of die waarde leeg is en als dit het geval is, gebruiken we de show () -methode van jQuery om het label te tonen met
id "name_error":
if (naam == "") $ ("label # name_error"). show (); Vervolgens plaatsen we de formulierfocus terug op het invoerveld met id van "name", en retourneren uiteindelijk false:
if (naam == "") $ ("label # name_error"). show (); . $ ( "Input # name") richten (); return false; Zorg ervoor dat je de code onterecht retourneert, anders wordt het hele formulier verzonden (wat verslaat)
het doel van deze tutorial)! Wat return false doet, is dat het de gebruiker belet verder te gaan
zonder het invullen van het vereiste veld (en).
Nu komen we aan de kern van de tutorial - het indienen van ons formulier zonder vernieuwing van de pagina, die de formulierwaarden naar een php stuurt een script in de achtergrond. Laten we eerst eens kijken naar alle code, dan zal ik hierna in meer detail uitpakken. Voeg de volgende code toe net onder het validatiefragment dat we eerder hebben toegevoegd (en voordat de knopklikfunctie is gesloten):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); return false; $ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Contactformulier verzonden!
") .append ("We nemen snel contact met je op.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("
"););); return false; We hebben hier veel te doen! Laten we het allemaal op een rijtje zetten - het is zo eenvoudig en zo gemakkelijk te gebruiken als je eenmaal het proces begrijpt. We maken eerst een reeks waarden, die alle formulierwaarden zijn die we willen doorgeven aan het script dat de e-mail verzendt.
Recall hiervoor, we hadden een variabele 'naam' ingesteld met de waarde van het invoerveld met id "name", zoals zo:
"););); return false; var name = $ ("input # name"). val (); We kunnen die 'name'-waarde opnieuw gebruiken, evenals de waarden voor' e-mail 'en' telefoon 'om onze dataString te maken:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
Ik heb een waarschuwing gegeven die ik soms gebruik om er zeker van te zijn dat ik de juiste waarden grijp, die u mogelijk nuttig vindt in het proces. Als je die waarschuwing ongecommentarieerd hebt en je formulier hebt getest, aangenomen dat alles tot nu toe goed is gegaan, zou je een bericht moeten krijgen dat lijkt op het volgende:
Nu komen we bij onze belangrijkste ajax-functie, de ster van de show van vandaag. Dit is waar alle actie gebeurt, dus betaal
veel aandacht!
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () // hier bericht weergeven aan gebruiker); return false;
Wat in de code aan de hand is, is dit: de functie .ajax () verwerkt de waarden uit onze reeks met de naam dataString (data: dataString) met een php-script met de naam process.php (url: "bin / process.php"), met gebruik van de 'POST'-methode (type: "POST"). Als ons script met succes is verwerkt, kunnen we een bericht teruggeven aan de gebruiker en uiteindelijk false retourneren, zodat de pagina niet opnieuw wordt geladen. Dat is het! Het hele proces wordt daar behandeld in deze paar regels!
Er zijn geavanceerdere dingen die u hier kunt doen, behalve het verzenden van een e-mail en het geven van een succesbericht. U kunt bijvoorbeeld uw waarden naar een database sturen, deze verwerken en vervolgens de resultaten teruggeven aan de gebruiker. Dus als u een peiling naar gebruikers heeft gepost, kunt u hun stem verwerken en vervolgens de stemresultaten retourneren, allemaal zonder dat u de pagina hoeft te verversen.
Laten we samenvatten wat er in ons voorbeeld is gebeurd, om er zeker van te zijn dat we alles hebben behandeld. We pakten onze formulierwaarden met jQuery en plaatsten die vervolgens in een tekenreeks als deze:
var name = $ ("input # name"). val (); var email = $ ("input # email"). val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Vervolgens hebben we de ajax-functie van jQuery gebruikt om de waarden in de gegevensString te verwerken. Daarna
het proces is succesvol afgerond, we geven een bericht terug aan de gebruiker en voegen return false toe zodat onze pagina niet wordt vernieuwd:
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, success: function () $ ('# contact_form'). html (""); $ ('# message'). html ("Contactformulier verzonden!
") .append ("We nemen snel contact met je op.
") .hide () .fadeIn (1500, function () $ ('# message'). append (""););); return false; Het succesgedeelte van het script is gevuld met een aantal specifieke inhoud die aan de gebruiker kan worden getoond. Maar wat onze ajax-functionaliteit betreft, dat is alles wat er is. Raadpleeg voor meer opties en instellingen de documentatie van jQuery over de ajax-functie. Het voorbeeld hier is een van de eenvoudigere implementaties, maar toch is het erg krachtig zoals je kunt zien.
Laten we kort kijken naar het gedeelte van de code dat ons bericht weergeeft aan de gebruiker, om de zelfstudie af te ronden.
Eerst veranderen we de volledige inhoud van de contact_form div (onthoud dat ik zei dat we die div nodig zouden hebben) met de volgende regel:
$ ( '# Contact_form'). Html (""); Wat dat heeft gedaan, is alle inhoud in de contact_form div vervangen door de html () -functie van jQuery te gebruiken. Dus in plaats van een vorm hebben we nu gewoon een nieuwe div binnen, met id van 'bericht'. Vervolgens vullen we die div in met een echte boodschap - een h2 zeggende: "Contact Form Submitted":
$ ( '# E-mail'). Html ("Contactformulier verzonden!
") We voegen vervolgens nog meer inhoud toe aan de bericht-div met de functie addend () van jQuery en om alles af te ronden, voegen we een cool effect toe door de div boodschap te verbergen met de jQuery hide () -functie, en dan alles fadeIn met fadeIn () functie:
.toevoegen ("We nemen snel contact met je op.
") .hide () .fadeIn (1500, function () $ ('# message'). append ("");); Dus de gebruiker ziet het volgende na het indienen van het formulier:
Inmiddels denk ik dat je het erover eens moet zijn dat het ongelooflijk eenvoudig is om formulieren in te dienen zonder paginavernieuwing met de krachtige ajax-functie van jQuery. Haal gewoon de waarden op in je JavaScript-bestand, verwerk ze met de ajax-functie en retourneer false en je bent klaar om te gaan. Je kunt de waarden in je php-script verwerken net zoals je met elk ander php-bestand zou doen, het enige verschil is dat de gebruiker niet hoeft te wachten op een paginavernieuwing - het gebeurt allemaal stil op de achtergrond.
Dus als u een contactformulier op uw website, een aanmeldingsformulier of zelfs geavanceerdere formulieren hebt die waarden verwerken in een database en resultaten terughalen, kunt u dit allemaal eenvoudig en efficiënt doen, en misschien nog belangrijker, u verbetert de eindgebruiker. ervaring met uw website door interactiviteit te bieden zonder dat u hoeft te wachten tot de pagina opnieuw is geladen.
Ik zou graag enkele laatste woorden willen toevoegen over het geleverde demovoorbeeld. In de demo kun je merken dat er feitelijk één plug-in wordt gebruikt: het bestand ranonload.js. Ik heb aan het begin van de tutorial verklaard dat we geen plug-ins zouden gebruiken, en dan vind je in de demo een extra runonload-script, dus er kan wat uitleg nodig zijn! Voor iedereen die geïnteresseerd is in een live werkende demo, kun je het SEO-consultingformulier van mijn website bekijken.
Het enige gebruik dat ik heb gemaakt met runonload heeft eigenlijk niets te maken met het verwerken van het formulier. U kunt dus de ajax-functies volledig uitvoeren zonder extra plug-ins. Ik heb alleen runonload gebruikt om het invoerveld naam te concentreren bij het laden van de pagina. Het is mijn ervaring dat het aanroepen van runonload soms een betere vervanging kan zijn voor de native document-ready-functie van jQuery en ik merkte dat dit het geval was bij het samenstellen van deze tutorial. Om een of andere reden zou de functie focus () niet werken bij het laden van pagina's met de native document-ready-functie van jQuery - maar het werkte wel met runonload en daarom vindt u het als onderdeel van het voorbeeld. Dus als je een manier weet om dat te bereiken zonder runonload te gebruiken, zou ik graag van je horen.
We hebben een complete handleiding samengesteld om u te helpen JavaScript te leren, of u net bent begonnen als een webontwikkelaar of dat u meer geavanceerde onderwerpen wilt verkennen.
