Верстка сайта

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

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

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

Видеоурок

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

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

Исходный код

Форма обратной связи
<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 месяца

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

Изучение CSS/CSS3 от нуля до гуру!
15 уроков
Вёрстка адаптивного сайта на Bootstrap 4
6 уроков
Изучение технологии Bootstrap (верстка сайта)
16 уроков
Изучение HTML5 от нуля до гуру!
21 урок
Изучение ASP.NET Core MVC. Создание сайтов на C#
10 уроков
Видеокурс по PHP, MySQL / Создание динамического сайта