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ć potrebitima

http://www.hck.hr

Hrvatski Crveni križ

u službi humanosti od 1878.

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

15 komentara

  • weberica kaže:

    Hvala na ovom odličnom članku, nadamo se da će ih biti još mnogo u budućnosti :)

  • Webmaster kaže:

    Cool i dobrodošao u veselu družinu :) Napisati ću kasnije članak o svim novostima na Kroativu pa i o predstavljanju novog autora :)

  • Heeddinggreem kaže:

    Hi, Congratulations to the site owner for this marvelous work you’ve done. It has lots of useful and interesting data.

  • weberica kaže:

    thank you in the name of the entire team :)

  • Zvonko kaže:

    A kak čovjek razumije kaj piše?

    • zlatko kaže:

      NE valja ajax,php skripta jer ne radi što bi trebala, dapaće pojavi se samo kod skripte na stranici

  • Weberica kaže:

    ima translations dole desno. Nagovaram admina da ga stavi uočljivo negdje na vrh stranice, logičnije je :)

  • zlatko kaže:

    slanje emaila NE radi jer ne valja skripta ajax.php koja je doslovno kopirana i spremljena u istu mapu s .htm stranicom. Što NE valja, molim lijepo?

    • Webmaster kaže:

      Probajte sljedeće, u ovome dijelu na vrhu koda < ?php
      maknite razmak između < i ?, znači trebalo bi biti sve skupa bez razmaka. Plugin nam zezne početne tagove php-a i možda je u tome problem ako Vam se ispisuje kod na stranici.

  • nekruba kaže:

    Što ne valja? Meni vrati ovo: Parse error: syntax error, unexpected ‘@’ in /home/xxxx/public_html/ajax.php on line 2. ($to = “ovdje upišite svoj email”;) Zašto ne mogu upisati “@”?

  • weberica kaže:

    Kad kopiraš sa Kroativa onda nisu dobri jednostruki i dvostruki navodnici. Zato ne radi. Treba to ručno ispraviti

  • SliceMachine kaže:

    Znači, kada kopirate kod, onda treb promijeniti navodnike. Otvorite kod u notepadu i ručno napišite navodnike (dvostruki trebaju izgledati kao ovi ispod komentara)

  • Nikola kaže:

    Mana ove forme je jedino u tome sto joj je validacija na dosta primitivnom nivou,npr. u polje
    E-mail: možete napisati bilo šta,ne morate pisati ispravnu e-mail adresu,napišete bilo koju rječ i poruka je prošla.
    Pozdrav svima!

    • Ljacmi kaže:

      Odlično primjećeno!
      if (! preg_match(‘/@.+\..+$/’, $email))
      { die (“E-mail adresa nije ispravna!”); }
      jedno od mogućih rješenja gore navedenog problema, iako je autor najvjerojatnije s namjerom izostavio taj dio i sad se lijepo ”šnitaju” komentari ;)

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="">