Ajax контакт формулар со jQuery и PHP

jquery-formular

Ова е едноставен пример на креирање на 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 кодот се проверува дали сите полиња се пополнети, па се испраќа емаилот:

// Доколку имаме POST метод се извршува кодот подолу
if ($_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) {

		// Ова е резултатот кој се прикажува со jQuery
		echo "<strong>$ime</strong>, твојот коментар е успешно испратен.";
		exit;

	// Доколку емаилот не е испратен се извршува кодот подолу
	} else {

		// Ова е резултатот кој се прикажува со jQuery
		echo "<strong>Грешка</strong>, Обидете се повторно.";
		exit;
	}

 // Доколку немаме POST метод се извршува кодот подолу
} else {

	// Ова е резултатот кој се прикажува со jQuery
	echo "<strong>Грешка</strong>, Обидете се повторно.";
	exit;
}
}

Разгледајте го jQuery кодот внимателно и прочитајте го секое објаснување детално:

$(function() {
// При кликнување на копчето Испрати се извршува кодот подолу
$('#submit').click(function() {

	// Се ордерува вредноста од полето Име
	var ime = $('#ime').val();

	// Се ордерува вредноста од полето Емаил
	var email = $('#email').val();

	// Се ордерува вредноста од полето Коментар
	var komentar = $('#komentar').val();

	// Се отстранува параграфот со ID "odgovor",
	// доколку е веќе прикачен, за да не дојде до дупликација
	$('#odgovor').remove();

	// Се отстранува параграфот со ID "error",
	// доколку е веќе прикачен, за да не дојде до дупликација
	$('#error').remove();

	// Едноставна проверка дали се пополнети сите полиња,
	// Доколку едно од полињата е празно се се извршува кодот подолу
	if ((ime == "") || (email == "") ||(komentar == "")) {

		// Се прикачува параграф со ID "error"
		$('#container').append('<strong>Грешка:</strong> Пополнете ги сите полиња.');

		// Најпрво параграфот се крие со hide(),
		// а потоа постепено се појавува
		$('#error').hide().fadeIn();
		return false;
	}

	// Ја покажува loading анимацијата
	$('#loading').show();

	$.ajax({
		
		// Метод на испраќање на податоците
		type: "POST",

		// Фајл до кој се испраќаат податоците
		url: "index.php",

		// Припрема на внесените податоци
		data: 'ime=' + ime + '&l=' + email + '&komentar=' + komentar,

		// Доколку се појави грешка се извршува кодот подолу
		error: function(){

			// Се прикачува параграф со ID "error"
			$('#container').append('<strong>Грешка:</strong> Обидете се повторно.');

			// Најпрво параграфот се крие со hide(),
			// а потоа постепено се појавува
			$('#error').hide().fadeIn();

			// Loading анимацијата полека исчезнува
			$('#loading').fadeOut();
		},

		// Доколку успее испраќањето на податоците се извршува кодот подолу
		success: function(rezultat) {

			// Се прикачува параграф со ID "odgovor"
			$('#container').append(rezultat);

			// Најпрво параграфот се крие со hide(),
			// а потоа постепено се појавува
			$('#odgovor').hide().fadeIn();

			// Loading анимацијата полека исчезнува
			$('#loading').fadeOut();
		}
	});
	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

// Доколку имаме POST метод се извршува кодот подолу
if ($_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) {

		// Ова е резултатот кој се прикажува со jQuery
		echo "<strong>$ime</strong>, твојот коментар е успешно испратен.";
		exit;

	// Доколку емаилот не е испратен се извршува кодот подолу
	} else {

		// Ова е резултатот кој се прикажува со jQuery
		echo "<strong>Грешка</strong>, Обидете се повторно.";
		exit;
	}

 // Доколку немаме POST метод се извршува кодот подолу
} else {

	// Ова е резултатот кој се прикажува со jQuery
	echo "<strong>Грешка</strong>, Обидете се повторно.";
	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();

	// Се отстранува параграфот со ID "odgovor",
	// доколку е веќе прикачен, за да не дојде до дупликација
	$('#odgovor').remove();

	// Се отстранува параграфот со ID "error",
	// доколку е веќе прикачен, за да не дојде до дупликација
	$('#error').remove();

	// Едноставна проверка дали се пополнети сите полиња,
	// Доколку едно од полињата е празно се се извршува кодот подолу
	if ((ime == "") || (email == "") ||(komentar == "")) {

		// Се прикачува параграф со ID "error"
		$('#container').append('<strong>Грешка:</strong> Пополнете ги сите полиња.');

		// Најпрво параграфот се крие со hide(),
		// а потоа постепено се појавува
		$('#error').hide().fadeIn();
		return false;
	}

	// Ја покажува loading анимацијата
	$('#loading').show();

	$.ajax({
		
		// Метод на испраќање на податоците
		type: "POST",

		// Фајл до кој се испраќаат податоците
		url: "index.php",

		// Припрема на внесените податоци
		data: 'ime=' + ime + '&l=' + email + '&komentar=' + komentar,

		// Доколку се појави грешка се извршува кодот подолу
		error: function(){

			// Се прикачува параграф со ID "error"
			$('#container').append('<strong>Грешка:</strong> Обидете се повторно.');

			// Најпрво параграфот се крие со hide(),
			// а потоа постепено се појавува
			$('#error').hide().fadeIn();

			// Loading анимацијата полека исчезнува
			$('#loading').fadeOut();
		},

		// Доколку успее испраќањето на податоците се извршува кодот подолу
		success: function(rezultat) {

			// Се прикачува параграф со ID "odgovor"
			$('#container').append(rezultat);

			// Најпрво параграфот се крие со hide(),
			// а потоа постепено се појавува
			$('#odgovor').hide().fadeIn();

			// Loading анимацијата полека исчезнува
			$('#loading').fadeOut();
		}
	});
	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>
gravatar
Автор: Даниел Брзанов
За авторот: Здраво! Јас сум Даниел a.k.a. Delicon, се занимавам со веб дизајн и програмирање повеќе од 10 години и сакам да го споделам своето знаење со сите што се заинтересирани за тоа.

6 Коментари

  1. Добра е формата, само додај за емаил адреса уште еден циклус каде ќе се проверува валидноста. Мислам на познатиот знак "@" без кој адресата не би била валидна.

  2. Еве допринос од мене…. эа проверка на валидност на е-маил адреса. Многу корисно е да се энае 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.";

    }

  3. Одличен пример

  4. Недостига Client-Side валидација, нешто за што jQuery e одличнен framework.

    Се на се, ок пример

  5. Линкот за преземање не работи ќе сакате да го обновите??

  6. @Milan линкот за формуларот можеш да го симнеш од тука:

    http://delicon.mk/blog/primeri/jquery-formular/jq