Ajax контакт формулар со jQuery и PHP
Ова е едноставен пример на креирање на Ajax контакт формулар со jQuery и PHP. Крајниот резултат можете да го погледнете тука или пак преземете го.
За овој пример ќе ни бидат потребни:
- xHTML
- PHP
- jQuery библиотека
- CSS стил
- loading анимација
Најпрво ќе ни треба PHP документ во кој ќе се наоѓа HTML и PHP кодот.
HTML-от содржи едноставен формулар со име, емил и коментар:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Ajax контакт формулар со jQuery - Delicon Interactive Blog</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="css/style.css" /> <!-- Се прикачува css стил --> <script type="text/javascript" src="js/jquery.js"></script> <!-- Се прикачува jQuery библиотеката на страната --> <script type="text/javascript"> <!-- jQuery --> </head> <body> <div id="container"> <form action="index.php" method="post"> <label for="ime">Име:</label> <input type="text" name="ime" id="ime" /> <label for="email">Email:</label> <input type="text" name="email" id="email" /> <label for="komentar">Коментар:</label> <textarea name="komentar" id="komentar"></textarea> <input type="submit" value="Испрати" name="submit" id="submit" /> <img src="img/loading.gif" id="loading" alt="Се вчитува" /> </form></div> </body> </html>
Во PHP кодот се проверува дали сите полиња се пополнети, па се испраќа емаилот:
if ($_POST) { // Доколку имаме POST метод се извршува кодот подолу
if (($_POST[ime]) & ($_POST[email]) & ($_POST[komentar])) { // Доколку се пополнети сите полиња се извршува кодот подолу
$do = "contact@primer.com"; // Емаил на кој треба да стигне пораката
$ime = $_POST['ime']; // Се одредува името
$email = $_POST['email']; // Се одредува емаилот
$komentar = $_POST['komentar']; // Се одредува коментарот
$naslov = "$ime vi isprati email"; // Наслов на емаилот
// Припрема на пораката што треба да биде испратена на емаил
$poraka .= "Od: $ime\n";
$poraka .= "E-mail: $email\n";
$poraka .= "Poraka:\n";
$poraka .= $komentar;
$headers = 'From:' . $email; // Се ордедува испраќачот на емаилот
$prati = mail($do, $naslov, $poraka, $headers); // Се испраќа емаилот
if ($prati) { // Доколку емаилот е успешно испратен се извршува кодот подолу
echo "
<strong>$ime</strong>, твојот коментар е успешно испратен.
"; // Ова е резултатот кој се прикажува со jQuery
exit;
} else { // Доколку емаилот не е испратен се извршува кодот подолу
echo "
<strong>Грешка</strong>, Обидете се повторно.
"; // Ова е резултатот кој се прикажува со jQuery
exit;
}
} else { // Доколку немаме POST метод се извршува кодот подолу
echo "
<strong>Грешка</strong>, Обидете се повторно.
";// Ова е резултатот кој се прикажува со jQuery
exit;
}
}
Разгледајте го jQuery кодот внимателно и прочитајте го секое објаснување детално:
$(function() {
$('#submit').click(function() { // При кликнување на копчето Испрати се извршува кодот подолу
var ime = $('#ime').val(); // Се ордерува вредноста од полето Име
var email = $('#email').val(); // Се ордерува вредноста од полето Емаил
var komentar = $('#komentar').val(); // Се ордерува вредноста од полето Коментар
$('#odgovor').remove(); // Се отстранува параграфот со ID "odgovor", доколку е веќе прикачен, за да не дојде до дупликација
$('#error').remove(); // Се отстранува параграфот со ID "error", доколку е веќе прикачен, за да не дојде до дупликација
// Едноставна проверка дали се пополнети сите полиња,
if ((ime == "") || (email == "") ||(komentar == "")) { // Доколку едно од полињата е празно се се извршува кодот подолу
$('#container').append('
<strong>Грешка:</strong> Пополнете ги сите полиња.
'); // Се прикачува параграф со ID "error"
$('#error').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
return false;
}
$('#loading').show(); // Ја покажува loading анимацијата
$.ajax({
type: "POST", // Метод на испраќање на податоците
url: "index.php", // Фајл до кој се испраќаат податоците
data: 'ime=' + ime + '&l=' + email + '&komentar=' + komentar, // Припрема на внесените податоци
error: function(){ // Доколку се појави грешка се извршува кодот подолу
$('#container').append('
<strong>Грешка:</strong> Обидете се повторно.
'); // Се прикачува параграф со ID "error"
$('#error').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
$('#loading').fadeOut(); // Loading анимацијата полека исчезнува
},
success: function(rezultat){ // Доколку успее испраќањето на податоците се извршува кодот подолу
$('#container').append(rezultat); // Се прикачува параграф со ID "odgovor"
$('#odgovor').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
$('#loading').fadeOut(); // Loading анимацијата полека исчезнува
}
});
return false; // Се оневозможува пренасочувањето од копчето
});
});
Ова е CSS фајлот кој се прикачува на HTML-от:
* {
margin: 0;
padding: 0;
}
body {
font: 100% Verdana, Arial, Helvetica, sans-serif;
background: #EEE;
}
#container {
background: #FFF;
margin: 50px auto;
width: 300px;
border: 1px solid #DDD;
padding: 30px;
}
input { margin-bottom: 10px; }
label, textarea { display: block; }
label, input, textarea, p {
font: 0.75em Verdana, Arial, Helvetica, sans-serif;
color: #333;
}
input, textarea {
padding: 5px 2px;
border: 1px solid #CCC;
width: 294px;
}
textarea {
height: 100px;
line-height: 1.6em;
}
input:focus, textarea:focus {
border: 1px solid #AAA;
}
label {
margin-bottom: 2px;
color: #069;
font-size: 0.875em;
}
#submit {
width: 100px;
margin-top: 10px;
}
#submit:hover { border: 1px solid #AAA; }
#loading { display: none; }
#error {
font-size: 0.6875em;
background: #FFEBE8;
border: 1px solid #C33;
color: #333;
display: block;
padding: 5px;
}
#odgovor {
font-size: 0.6875em;
background: #FFFFE0;
border: 1px solid #E6DB55;
color: #333;
display: block;
padding: 5px;
}
На крај целиот код треба да ви изгледа како овој:
<?php
if ($_POST) { // Доколку имаме POST метод се извршува кодот подолу
if (($_POST[ime]) & ($_POST[komentar])) { // Доколку се пополнети сите полиња се извршува кодот подолу
$do = "contact@primer.com"; // Емаил на кој треба да стигне пораката
$ime = $_POST['ime']; // Се одредува името
$email = $_POST['email']; // Се одредува емаилот
$komentar = $_POST['komentar']; // Се одредува коментарот
$naslov = "$ime vi isprati email"; // Наслов на емаилот
// Припрема на пораката што треба да биде испратена на емаил
$poraka .= "Od: $ime\n";
$poraka .= "E-mail: $email\n";
$poraka .= "Poraka:\n";
$poraka .= $komentar;
$headers = 'From:' . $email; // Се ордедува испраќачот на емаилот
$prati = mail($do, $naslov, $poraka, $headers); // Се испраќа емаилот
if ($prati) { // Доколку емаилот е успешно испратен се извршува кодот подолу
echo "
<strong>$ime</strong>, твојот коментар е успешно испратен.
"; // Ова е резултатот кој се прикажува со jQuery
exit;
} else { // Доколку емаилот не е испратен се извршува кодот подолу
echo "
<strong>Грешка</strong>, Обидете се повторно.
"; // Ова е резултатот кој се прикажува со jQuery
exit;
}
} else { // Доколку немаме POST метод се извршува кодот подолу
echo "
<strong>Грешка</strong>, Обидете се повторно.
";// Ова е резултатот кој се прикажува со jQuery
exit;
}
}
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ajax контакт формулар со jQuery - Delicon Interactive Blog</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
$('#submit').click(function() { // При кликнување на копчето Испрати се извршува кодот подолу
var ime = $('#ime').val(); // Се ордерува вредноста од полето Име
var email = $('#email').val(); // Се ордерува вредноста од полето Емаил
var komentar = $('#komentar').val(); // Се ордерува вредноста од полето Коментар
$('#odgovor').remove(); // Се отстранува параграфот со ID "odgovor", доколку е веќе прикачен, за да не дојде до дупликација
$('#error').remove(); // Се отстранува параграфот со ID "error", доколку е веќе прикачен, за да не дојде до дупликација
// Едноставна проверка дали се пополнети сите полиња,
if ((ime == "") || (email == "") ||(komentar == "")) { // Доколку едно од полињата е празно се се извршува кодот подолу
$('#container').append('
<strong>Грешка:</strong> Пополнете ги сите полиња.
'); // Се прикачува параграф со ID "error"
$('#error').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
return false;
}
$('#loading').show(); // Ја покажува loading анимацијата
$.ajax({
type: "POST", // Метод на испраќање на податоците
url: "index.php", // Фајл до кој се испраќаат податоците
data: 'ime=' + ime + '&email=' + email + '&komentar=' + komentar, // Припрема на внесените податоци
error: function(){ // Доколку се појави грешка се извршува кодот подолу
$('#container').append('
<strong>Грешка:</strong> Обидете се повторно.
'); // Се прикачува параграф со ID "error"
$('#error').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
$('#loading').fadeOut(); // Loading анимацијата полека исчезнува
},
success: function(rezultat){ // Доколку успее испраќањето на податоците се извршува кодот подолу
$('#container').append(rezultat); // Се прикачува параграф со ID "odgovor"
$('#odgovor').hide().fadeIn(); // Најпрво параграфот се крие со hide(), а потоа постепено се појавува
$('#loading').fadeOut(); // Loading анимацијата полека исчезнува
}
});
return false; // Се оневозможува пренасочувањето од копчето
});
});
</script>
</head>
<body>
<div id="container">
<form action="index.php" method="post">
<label for="ime">Име:</label>
<input type="text" name="ime" id="ime" />
<label for="email">Email:</label>
<input type="text" name="email" id="email" />
<label for="komentar">Коментар:</label>
<textarea name="komentar" id="komentar"></textarea>
<input type="submit" value="Испрати" name="submit" id="submit" />
<img src="img/loading.gif" id="loading" alt="Се вчитува" />
</form></div>
</body>
</html>
Клучни зборови: Ajax, jQuery, PHP 
23 Jan, 2009 во 17:30
Добра е формата, само додај за емаил адреса уште еден циклус каде ќе се проверува валидноста. Мислам на познатиот знак “@” без кој адресата не би била валидна.
4 Mar, 2009 во 12:12
Еве допринос од мене…. эа проверка на валидност на е-маил адреса. Многу корисно е да се энае regex (регуларни иэраэи).
Еве еден regex эа маил
if(eregi(“^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$”, $email)) {
echo “Valid email address.”;
}
else {
echo “Invalid email address.”;
}
2 Apr, 2009 во 11:07
Одличен пример
15 Dec, 2009 во 03:58
Недостига Client-Side валидација, нешто за што jQuery e одличнен framework.
Се на се, ок пример