Урок #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 месяца
Также стоит посмотреть
Комментарии
