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

Урок #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>

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

Загрузка...

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

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

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

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