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.

05.06.2009 u web development | 15 komentara

Dodaj u favorite

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.

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:

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.

Slični sadržaj:

Kako instalirati wordpress - video tutorial (Jako slično)
Joomla! za početnike (Jako slično)
Kako napraviti user-friendly spam-free formu (Jako slično)
Registracija i login korisnika - PHP i mySQL tutorijal (Jako slično)
Kako stvoriti razvojno okruženje za PHP/mySQL na Windows računalu (Jako slično)

Označeno s: tutorial

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

pratite komentare putem RSS kanala

weberica kaže:

05.06.09 u 09:51 h

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

odgovori
Webmaster kaže:

05.06.09 u 10:06 h

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

odgovori
Heeddinggreem kaže:

05.06.09 u 19:36 h

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

odgovori
weberica kaže:

06.06.09 u 13:35 h

thank you in the name of the entire team 🙂

odgovori
Zvonko kaže:

07.06.09 u 07:45 h

A kak čovjek razumije kaj piše?

odgovori
- zlatko kaže:
  
  14.01.10 u 16:27 h
  
  NE valja ajax,php skripta jer ne radi što bi trebala, dapaće pojavi se samo kod skripte na stranici
Weberica kaže:

07.06.09 u 11:24 h

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

odgovori
Weberica kaže:

07.06.09 u 15:46 h

.. a eo i inspiracije: http://www.tutzone.org/2009/05/24-contact-form-page-designs-full-of.html

odgovori
zlatko kaže:

14.01.10 u 16:24 h

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?

odgovori
- Webmaster kaže:
  
  14.01.10 u 16:32 h
  
  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:

28.01.10 u 22:01 h

Š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 “@”?

odgovori
weberica kaže:

12.04.10 u 11:08 h

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

odgovori
SliceMachine kaže:

12.04.10 u 11:41 h

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)

odgovori
Nikola kaže:

14.02.11 u 22:39 h

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!~~

odgovori
- Ljacmi kaže:
  
  16.02.11 u 09:15 h
  
  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.