Hvordan lage et kontaktskjema på jQuery

January 26

jQuery er et populært Javascript rammeverk bibliotek som lar webutviklere å håndtere innsending av skjemaet validering i sanntid. Sanntids form validering tillater brukeren å unngå frustrerende opplevelse for re-lasting hele nettet siden hver gang et skjemafelt validerer ikke. jQuery er en åpen kildekode-rammeverk under en MIT og GPL lisensen. Med andre ord, det er gratis å bruke. Biblioteket er liten (144 KB), og er inkorporert i en Web-prosjekt uten å bruke en betydelig mengde av ressurser.

Bruksanvisning

1 Last ned en jQuery validering plug-in. Denne opplæringen benytter jquery.validate.js plug-in fra bassistance.de nettstedet. Webutviklere kan dra nytte av et stort antall andre jQuery plug-ins som også er tilgjengelig på Internett, har allerede blitt kodet, er gratis å bruke og er tilpasset for å håndtere form innleveringer. Store kode depositories inkludert Google Code, jQuery og SourceForge.net tillate utviklere å laste ned disse plug-ins uten kostnader (se Ressurser).

2 Start en ny PHP-fil. Denne filen vil skape en one-felt form, bruker jQuery til å validere at innspill har blitt plassert inn i feltet før innsending av skjemaet, og hvis validert, vil e ferdig feltet til Web-utvikler.

3 Skriv PHP-kode for å håndtere de innsendte skjemadata. Denne todelte kode sikrer at dataene ble lagt, bruker PHP postfunksjonen til å sende de innsendte data og setter $ emailSent variabelen til "true". Ved anvendelsen av denne opplæringen, har feltet blitt tildelt navnet "CONTACT".

<? Php
if (isset ($ _ POST [ 'submit'])) {
if (trim ($ _ POST [ 'CONTACT']) == '') {
$ HasError = true; } Else {
$ Name = trim ($ _ POST [ 'CONTACT']);}
if (! isset ($ hasError)) {
$ Emailto = '[email protected]';
$ Body = "Navn: $ name \ n \ nEmail: $ email \ n \ nSubject: $ gjenstand \ n \ nComments: \ n $ kommentarer";
$ overskrifter = 'Fra: Mitt område <' $ emailto.. ">". "\ R \ n". 'Svare på: ' . $ E-post;
mail ($ emailto, $ emne, $ kroppen, $ overskrifter);
$ EmailSent = true;}}
?>

4 Importer jQuery kode. I hodet av filen, link til den versjonen av jQuery hostet av Google, trekke i jquery.validate.js plugg og sette inn en Javascript-funksjon for å validere skjemaet. Ved anvendelsen av denne opplæringen, er formen referert til som "yourContactForm".

<Head>
<Script src = "http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type =" text / javascript "> </ script>
<Script src = "jquery.validate.js" type = "text / javascript"> </ script>
<Script type = "text / javascript">
$ (Document) .ready (function () {
$ ( "# YourContactForm") validere (.);
});
</ Script>
</ Head>

5 Skriv legemet av filen. Liket av filen inneholder kontaktskjemaet innpakket i "kontakt-wrapper" div. En liten del av PHP utfører en isset sjekk på $ emailSent variabel, og hvis variabelen er satt, "Takk for at du sendte formen min" setning vises i stedet for skjemaet.