Share
Tidligere på Nettuts + viste Philo hvordan du kan bruke jQuery til å legge til skjema validering til wordpress kommentarer som fungerer uten sidelastning. En annen fin måte å eliminere jQuery på for å forbedre brukeropplevelsen er å ikke bare validere, men å sende skjemaet ditt helt uten en sideoppdatering.
I denne opplæringen vil jeg vise deg hvor lett det er å gjøre nettopp det - send inn et kontaktskjema som sender en e-post, uten sideoppdatering ved hjelp av jQuery! (Den faktiske e-posten sendes med et php-skript som behandler i bakgrunnen). La oss komme i gang.
Hvis du vil ha en ferdig løsning, kan du prøve det Ultimate PHP, HTML5 og AJAX-kontaktskjemaet, eller bla gjennom de andre skjermskriptene for salg på Envato Market.
Form skript og plugins for salg på Envato Market I dette eksemplet har vi et enkelt kontaktskjema med navn, e-post og telefonnummer. Skjemaet sender alle feltene til et php script uten sideoppdatering, ved hjelp av native jQuery-funksjoner (native meaning, du trenger ikke laste ned noen ekstra plugins for å få det til å fungere.
Hvis du har funnet denne artikkelen uten tidligere kjennskap til jQuery, vil et flott sted å komme i gang være Jeffrey Ways artikkel om 15 ressurser for å få deg i gang med jQuery fra grunnen av.
La oss ta en titt på vårt HTML-oppslag. Vi starter med vårt grunnleggende html-skjema:
Du kan legge merke til at jeg har tatt med en div med id-kontakt_form som bryter rundt hele skjemaet.
Husk å ikke gå glipp av den div i din egen form da vi vil trenge denne wrapper div senere. Du
kan også legge merke til at jeg har forlatt både handlingen og metodedelene til skjemaetiketten tom. Vi
egentlig trenger ikke noen av disse her, fordi jQuery tar seg av det hele senere.
En annen viktig ting å være sikker på å ta med er id-verdiene for hvert inntastingsfelt. ID-verdiene
er hva jQuery-skriptet ditt vil se etter for å behandle skjemaet med.
Jeg har lagt til noen css-stiler og et bakgrunnsbilde i Photoshop for å produsere følgende skjema:
Det neste trinnet i prosessen er å legge til noe jQuery-kode. Jeg kommer til å anta at du har lastet ned jQuery, lastet opp til serveren din, og refererer det til i din nettside.
Deretter åpner du en annen ny javascriptfil, referer den til i html som du ville ha en vanlig javascriptfil,
og legg til følgende:
Accentsconagua
$ (funksjon () $ (". knapp"). klikk (funksjon () // validere og behandle skjema her);); Hva den første funksjonen () gjør, laster inn hendelsene inni, så snart html-dokumentet er klart. Hvis du har gjort noe i jQuery tidligere, er funksjonen den samme som jQuery's document.ready-funksjon. Så vi begynner med det, og inne har vi vår klikkfunksjon som utfører ved å klikke på send-knappen med klassenavnet "knappen". Til slutt er det vi har oppnådd med disse kodelinjene, det samme som om vi skulle legge til en onclick-hendelse på send-knappen i html. Grunnen til at vi gjør det med jQuery er for ren separasjon av vår presentasjon fra våre skript.
$ ('error'). skjul (); $ (".knapp"). klikk (funksjon () // validere og behandle skjema her $ ('feil'). skjul ; var navn = $ ("input # name") .val (); if (navn == "") $ ("label # name_error"). show (); $ ("input # name"). ), return false; var email = $ ("input # email") .val (); if (email == "") $ ("label # email_error"). ") .focus (); return false; var phone = $ (" input # phone ") .val (); if (phone ==" ") $ (" label # phone_error "). ("input # phone"). fokus (); return false;);); Innenfor vår funksjon som laster når siden er klar, legger vi til noen form validering. Men det første du ser som ble lagt til, er $ ('. Error'). Hide () ;. Hva dette gjør er skjuler våre 3 etiketter med klassenavn "feil". Vi vil at disse etikettene skal bli skjult, ikke bare når
Siden lastes først, men også når du klikker send, hvis en av meldingene ble vist til brukeren tidligere. Hver feilmelding skal bare vises hvis validering ikke fungerer.
Vi validerer ved først å sjekke om navnefeltet ble tomt av brukeren, og hvis det er, viser vi etiketten med ID for navn_error. Vi legger da fokus på navnets inntastingsfelt, i tilfelle brukeren
er i det hele tatt forvirret på hva du skal gjøre neste gang! (Jeg har lært å aldri anta for mye når det gjelder å danne brukere).
For å forklare mer detaljert hvordan vi gjør dette, setter vi en variabel "navn" til verdien av inntastingsfeltet med id "navn" - alt med en linje av jQuery:
var navn = $ ("input # name"). val (); Vi kontrollerer da om verdien er tom, og hvis det er, bruker vi jQuery's show () -metoden til å vise etiketten med
id "name_error":
hvis (navn == "") $ ("label # name_error"). show (); Deretter plasserer vi formfokuset tilbake på inntastingsfeltet med ID for "navn", og til slutt returnerer falskt:
hvis (navn == "") $ ("label # name_error"). show (); . $ ( "Input # name") fokus (); returner falsk; Pass på at du har returnert falsk i koden din, ellers blir hele skjemaet sendt (som beseires
Formålet med denne opplæringen)! Hva returnerer falskt gjør det, hindrer brukeren i å fortsette videre
uten å fylle ut de nødvendige feltene.
Nå kommer vi til hjertet av opplæringen - sender inn skjemaet uten sideoppdatering, som sender formverdiene til et php-skript i bakgrunnen. La oss ta en titt på all koden først, så vil jeg bryte ned i detaljene neste. Legg til følgende kode like under valideringsbiten vi la til tidligere (og før knappeklikkfunksjonen er stengt):
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; // alert (dataString); return false; $ .ajax (type: "POST", url: "bin / process.php", data: dataString, suksess: funksjon () $ ('# contact_form'). html"); $ ('# message'). html ("Kontaktskjema sendt inn!
") .append ("Vi kommer snart i kontakt.
") .hide () .fadeIn (1500, funksjon () $ ('# melding') .append ("
"););); return false; Vi har mye på gang her! La oss kaste det hele ned - det er så enkelt og så lett å bruke når du forstår prosessen. Vi lager først en streng med verdier, som er alle formverdiene som vi vil overføre til skriptet som sender e-posten.
Husk tidligere, vi hadde satt en variabel "navn" med verdien av inntastingsfeltet med id "navn", slik som:
"););); return false; var navn = $ ("input # name"). val (); Vi kan bruke den "navn" -verdien på nytt, samt "e-post" og "telefon" -verdiene, for å lage vår dataString:
var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone;
Jeg har kommentert et varsel om at jeg noen ganger bruker for å være sikker på at jeg tar de riktige verdiene, som du kan finne nyttige i prosessen. Hvis du ikke merker det som varsel og test skjemaet ditt, forutsatt at alt har gått like langt, bør du få en melding som ligner på følgende:
Nå kommer vi til vår viktigste ajax-funksjon, stjernen i dagens show. Det er her alt handlingen skjer, så betal
nøye!
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, suksess: funksjon () // vis melding tilbake til brukeren her); returner falsk;
I utgangspunktet er det som skjer i koden dette: .ajax () -funksjonen behandler verdiene fra vår streng kalt dataString (data: dataString) med et php-skript kalt process.php (url: "bin / process.php") ved å bruke "POST" -metoden (type: "POST"). Hvis vårt skript behandles vellykket, kan vi da vise en melding tilbake til brukeren, og til slutt returnere falsk, slik at siden ikke laster på nytt. Det er det! Hele prosessen håndteres rett der i disse få linjene!
Det er mer avanserte ting du kan gjøre her, annet enn å sende en e-post og gi en suksessmelding. For eksempel kan du sende verdiene dine til en database, behandle dem, og deretter vise resultatene tilbake til brukeren. Så hvis du sendte en avstemning til brukere, kan du behandle deres stemme, og deretter returnere avstemningsresultatene, alt uten at noen sideoppdatering kreves.
La oss oppsummere hva som skjedde i vårt eksempel, for å være sikker på at vi har dekket alt. Vi fanget våre skjemaverdier med jQuery, og plasserte dem i en streng som denne:
var navn = $ ("input # name"). val (); var email = $ ("input # email") .val (); var phone = $ ("input # phone"). val (); var dataString = 'name =' + name + '& email =' + email + '& phone =' + phone; Deretter brukte vi jQuery's ajax-funksjon til å behandle verdiene i dataString. Etter det
prosessen er ferdig, viser vi en melding tilbake til brukeren og legger tilbake falsk, slik at siden vår ikke oppdateres:
$ .ajax (type: "POST", url: "bin / process.php", data: dataString, suksess: funksjon () $ ('# contact_form'). html"); $ ('# message'). html ("Kontaktskjema sendt inn!
") .append ("Vi kommer snart i kontakt.
") .hide () .fadeIn (1500, funksjon () $ ('# melding') .append (""););); return false; Suksessdelen av skriptet er fylt ut med noe spesifikt innhold som kan vises tilbake til brukeren. Men så langt som vår ajax-funksjonalitet går, er det alt der er til det. For flere alternativer og innstillinger, må du sjekke ut jQuery's dokumentasjon på ajax-funksjonen. Eksemplet her er en av de enklere implementeringene, men likevel, det er veldig kraftig som du kan se.
La oss se kort på koden som viser meldingen tilbake til brukeren, for å fullføre opplæringen.
Først endrer vi hele innholdet i contact_form div (husk jeg sa at vi ville trenge den div) med følgende linje:
$ ( '# CONTACT_FORM'). Html (""); Hva som har gjort, er erstattet alt innholdet inne i contact_form div, ved hjelp av jQuery's html () -funksjon. Så i stedet for et skjema har vi nå bare en ny div inne, med ID for "melding". Deretter fyller vi den div med en faktisk melding - en h2 sier "Kontaktskjema sendt inn":
$ ( '# Meldingen'). Html ("Kontaktskjema sendt inn!
") Vi legger til enda mer innhold til meldings diven med jQuery's append () -funksjon, og til toppen av alt legger vi til en kul effekt ved å gjemme meldings diven med jQuery hide () -funksjonen, og deretter fade det hele inn med fadeIn () funksjon:
.føye ("Vi kommer snart i kontakt.
") .hide () .fadeIn (1500, funksjon () $ ('# melding') .append ("");); Så brukeren ender opp med å se følgende etter at de har sendt skjemaet:
Ved nå tror jeg at du må være enig i at det er utrolig enkelt å sende inn skjemaer uten sideoppdatering ved hjelp av jQuery's kraftige ajax-funksjon. Bare få verdiene i javascriptfilen din, behandle dem med ajax-funksjonen og returner falsk, og du er god å gå. Du kan behandle verdiene i php-skriptet ditt akkurat som du ville noen annen php-fil, den eneste forskjellen er at brukeren ikke må vente på en sideoppdatering - alt skjer stille i bakgrunnen.
Så hvis du har et kontaktskjema på nettstedet ditt, et påloggingsskjema eller enda mer avanserte skjemaer som behandler verdier gjennom en database og henter resultatene tilbake, kan du gjøre alt enkelt og effektivt, og kanskje viktigst, du forbedrer sluttbrukeren erfaring med nettstedet ditt ved å gi interaktivitet uten at de må vente på at siden skal lastes opp.
Jeg vil gjerne legge til noen endelige ord om demo-eksemplet som tilbys. I demonstrasjonen kan du merke at det faktisk er en plugin som brukes - filen runonload.js. Jeg oppgav i begynnelsen av opplæringen at vi ikke ville bruke noen plugins, og så finner du i demoen det er et ekstra runonload-skript, så det kan være nødvendig med en forklaring! For alle som er interessert i å se en live-fungerende demo, kan du se nettstedets SEO konsulentskjema.
Den eneste bruken jeg laget med runonload har faktisk ingenting å gjøre med å behandle skjemaet. Så du kan oppnå ajax-funksjonene helt uten ekstra plugins. Jeg brukte bare runonload for å fokusere navnet på inputfeltet på sidebelastning. Det har vært min erfaring at ringende runonload kan noen ganger være en bedre erstatning for jQuery's native document ready-funksjon, og jeg fant det til å være tilfelle mens du satt sammen denne opplæringen. Av en eller annen grunn vil fokus () -funksjonen ikke fungere på sidebelastning ved hjelp av jQuery's native document ready-funksjon - men det fungerte med runonload, og det er derfor du finner det som en del av eksemplet. Så hvis du vet om en måte å oppnå det uten å bruke runonload, vil jeg gjerne høre fra deg om det.
Vi har bygget en komplett guide for å hjelpe deg med å lære JavaScript, enten du er bare i gang som webutvikler eller du vil utforske mer avanserte emner.
