Volite web dizajn?

Zašto ne podijelite svoje znanje s cijelim svijetom? Svatko može pisati za Kroativ i na taj način se promovirati.

Pomoć Haitiju

http://www.hck.hr

Pozivom na donatorski broj:

060 90 11 (6,15 kn, PDV uključen)

05.06.2009 u web development | 13 komentara
LoadingDodaj u favorite Isprintajte članak

Napredni contact form – jQuery i AJAX

Autor/ica itzvonko

Iskusni web developer s višegodišnjim iskustvom u back-end i front-end kodiranju. Odnedavno voditelj projekata tvrtke IT Sense. Najponosniji na projekt SliceMachine koji vam pomaže u rezanju dizajna i pretvaranju u web stranicu.

Oglas

Budući da se članak naslanja na odličan tutorial Weberice, posudit ćemo, za početak, njezin osnovni markup i stil za kontakt formu:

<div class=”contactform”>
<form id=”submit” method=”post”> <label>Name: </label><input id=”name” name=”name” size=”19″ type=”text” />
 
<label>E-mail: </label><input id=”email” name=”email” size=”19″ type=”text” />
 
<label>Text: </label><textarea id=”message” cols=”30″ rows=”9″ name=”message”></textarea>
 
<input class=”submit-button” name=”submit” type=”submit” value=”Submit” />
</form>
<div class=”“uspjeh“” style=”“display:none;“”>Vaša poruka je uspješno poslana!</div>
</div>

Jedina razlika je što smo svakom polju dodali i id radi lakše upotrebe jQuery čarolije i ispod forme smo dodali jedan
div koji je inicijalno sakriven, a služit će nam za prikaz poruke o uspjehu.

Budući da ćemo koristiti jQuery, trebamo ga includati u naš head tag:

<script src=”http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js” type=”text/javascript”></script>

Za potrebe ovog tutoriala, validaciju korisničkog unosa izvršit ćemo na serverskoj strani, mada se isto može napraviti i na klijentskoj strani koristeći jQuery.

Kod koji će se brinuti da se forma submita uz pomoć AJAXa izgleda ovako:

$(document).ready(function(){
    $("form#submit").submit(function() {
 
    // želimo spremiti korisnički unos u varijable
    // i poslati iste datoteci ajax.php
    var name        = $('#name').attr('value');
    var email       = $('#email').attr('value');
    var message     = $('#message').attr('value');
 
        $.ajax({
            type: "POST",
            url: "ajax.php",
            data: "name="+ name +"&amp;email="+ email+"&amp;message="+ message,
            success: function(odgovor){
                $('form#submit').hide();
                $('div.uspjeh').fadeIn();
	  $('div.uspjeh').text(odgovor);
            }
        });
    return false;
    });
});

Ukratko, ovaj kod će se pokrenuti kad se forma „submita“ odnosno na klik gumba Submit. Kod će putem POST varijabli proslijediti korisnički unos datoteci ajax.php, te ukoliko uspije u svojoj namjeri, sakrit će formu i prikazati poruku o uspjehu odnosno neuspjehu.

Da pojasnim. Success:function(odgovor) govori da ukoliko je AJAX dio prošao OK, jQuery će odgovor (response) upisati u varijablu odgovor, a mi ćemo isti koristiti da prikažemo korisniku poruku.

Vrijeme je da kreiramo našu ajax.php datoteku koja će primiti unos i poslati mail ukoliko sve bude u redu, odnosno vratiti poruku o grešci:

< ?php
$to = “ovdje upišite svoj email”;
$subject = “Form Tutorial”;
$name_field = $_POST['name'];
$email_field = $_POST['email'];
$message = $_POST['message'];
 
// paranoja me hvata, pa ćemo validirati polja na mail injection napad
if (eregi(”(\r|\n)”, $email_field)) {
die (”Nemojte spammati.”);
}
if (eregi(”(\r|\n)”, $name_field)) {
die (”Nemojte spammati.”);
}
 
$from = $name_field.’ <’.$email_field.’>’;
$additional_headers = “From: $from\nContent-Type: text/html; charset=utf-8″; // šaljemo mail kao HTML u UTF-8 encodingu
 
if (mail($to, $subject, $message, $additional_headers)) { //ako je mail uredno poslan
echo (’Vaša poruka je uspješno poslana!’);
}
else {
echo (’Greška kod slanja poruke. Probajte ponovno’);
}
?>

Gornji kod prima POST varijable koje mu šalje jQuery, provlači unose kroz osnovnu validaciju, te ako je sve u redu, šalje email na $to adresu, te vraća poruku o uspjehu.

Cijeli primjer možete vidjeti na demo stranici.

Označeno s:
Za ovaj članak možete glasati na CroPortalu i tako pomoći u njegovoj promociji. Ako članak još nije objavljen vi možete biti prvi!
Stavovi i mišljenja izrečena u ovome članku i/ili komentarima odnose se samo na autora/icu članka i/ili komentara, a ne i cijele Kroativ mreže. Zabranjeno je neovlašteno prenošenje članaka u cjelosti bez prethodnog dogovora ili bez istaknutog povratnog linka na www.kroativ.net stranicu te imena autora.
Oglas

13 komentara

pratite komentare putem RSS kanala
Trackbacks & Pingbacks

Ostavite komentar

Autori s više od 10 komentara nemaju tag nofollow na svojim linkovima! Zabranjeno je vrijeđanje, omalovažavanje ili na bilo koji drugi način ometanje normalnog toka komentara. Također je zabranjeno oglašavanje u komentarima i sve druge vrste spam-a.

(*) polja su obavezna

XHTML: Možete koristiti: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">