itProger

Создание сайта с нуля | Полноценная верстка сайта

11 уроков 45 заданий Справочник Компилятор

Урок #8 - Форма обратной связи (PHP, Ajax, jQuery)

Урок #8 - Форма обратной связи (PHP, Ajax, jQuery)


HTML5CSS3

В этом уроке мы напишем с вами форму обратной связи. При написании этой формы мы будем использовать такие технологии как PHP, Ajax, а также jQuery.

Видео урок:

Материалы для курса

itProger_website.zip Необходима подписка!

Чтобы скачивать материалы к видеокурсам необходимо оформить подписку на сайт

Исходный код

Форма обратной связи
<script>
$('#send').click (function () {
	var email = $('#email').val ();
	var name = $('#name').val ();
	var message = $('#message').val ();
	$.ajax({
		url:    	'ajax/kontakti.php',
		type:		'POST',
		cache: 		false,
		data:   	{'name':name, 'email':email, 'message':message},
		dataType:	'html',
		beforeSend: function () {
			$('#send').attr ("disabled", "disabled");
		},
		success: function(data) {
			if (data == true) {
				$('#name').val ("");
				$('#email').val ("");
				$('#message').val ("");
				$('#send').text ("Сообщение отправлено");
				$('#email').css ("border-color", "#60fc8c");
				$('#name').css ("border-color", "#60fc8c");
				$('#message').css ("border-color", "#60fc8c");
			} else {
				if (data == false)				
					alert ("Что-то пошло не так! Сообщение не отправлено");
				else {					
					switch (data) {
					case "Имя не указано":
					$('#name').css ("border-color", "#f7b4b4");
					break;
					case "Сообщение не указано":
					$('#message').css ("border-color", "#f7b4b4");
					break;
					case "Неправильный e-mail":
					$('#email').css ("border-color", "#f7b4b4");
					break;
					default:
					$('#email').css ("border-color", "#f7b4b4");
					$('#message').css ("border-color", "#f7b4b4");
					$('#name').css ("border-color", "#f7b4b4");
					}
				}
			}
			$('#send').removeAttr ("disabled");				
		}
	});
});
</script>

Онлайн редактор кода

Загрузка...

Задание к уроку

Еще формы
Самостоятельно добавите такую форму на страничку "Реклама".
Посмотреть ответ
На страничке "Реклама" будет точно такая же форма, вот только заголовок сообщения разве что можно поменять. Чтобы поменять заголовок сообщения вы можете сразу в файл-обработчик php передавать дополнительный параметр $subject - заголовок письма. Это будет простая строковая переменная, которая отличается на разных формах.

Большое задание по курсу

Вам необходимо оформить подписку на сайте, чтобы получить большое задание. Такие задания есть к каждому курсу. В них входит задание, методика решения, а также "Готовое решение".
PS: подобные задания доступны при подписке от 1 месяца!


HTML5CSS3

Также стоит посмотреть