Специально для Вас, подготовил одну из тем, которая в разработке сайтов встречается чаще всего и практически нет таких проектов, которые ее не используют. Сегодня мы поговорим с Вами о форме обратной связи на ajax. Я не буду рассматривать множество полей для нашего с Вами примера, хватит думаю и двух - имени и телефона. Если Вам потребуется больше полей, то стоит их только дописать и применить к ним валидацию. Но если Вы не знаете, как это сделать, можете обращаться ко мне, я помогу.
Подробно я все расписывать не буду, так как этот урок имеет еще и видео формат, поэтому рассмотрим только ключевые моменты, которые в обязательном порядке нужны для нормальной работы скрипта.
Принцип формы обратной связи на ajax таков: при нажатии на кнопку отправить, если поля не заполнены, выдаются две ошибки - Введите имя! и Введите телефон! Если заполнены оба поля, имя и телефон, но телефон заполнен не верно, к примеру присутствуют буквы, а не цифры, то выдается сообщение - Номер телефона введен не корректно! Если же все заполнено верно, то на почту отправляется письмо - Спасибо. Мы перезвоним Вам через 2 минуты!
Сначала мы должны подключить библиотеку jQuery, затем скрипт order.js и после стили demo.css.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="js/order.js"></script> <link type="text/css" rel="stylesheet" href="css/demo.css">
Теперь переходим к HTML коду. Всего как я уже говорил два поля - имя, телефон и кнопка отправить. Данная форма по идентификатору order переходит методом Ajax к скрипту order.js. В идентификатор dataresult, мы передаем ошибки и различные сообщения. В идентификатор datasql, мы передаем успешную отправку.
<div id="dataresult"></div> <div id="datasql"> <form id="order"> <input type="text" name="name" placeholder="Роман"> <input type="text" name="phone" placeholder="89175236667"> <input type="submit" value="Отправить"> </form> </div>
Переходим ко второму шагу и тут мы должны с Вами разобрать js код, который принимает ответ от формы HTML, и передает файлу order.php, которую в свою очередь обрабатывает и отдает ответ обратно. Заметим, что файл order.js, лежит в папке js/. Думаю комментировать, что то тут излишне, так как обычный ajax.
jQuery(document).ready(function($) {
$("#order").submit(function() {
var order = $(this).serialize();
$.ajax({
type: "POST",
url: "./order.php",
data: order,
success: function(msg) {
if(msg == 'OK') {
result = '<div class="answer">Спасибо. Мы перезвоним Вам через 2 минуты!</div>';
$("#datasql").hide();
} else {
result = msg;
}
$('#dataresult').html(result);
}
});
return false;
});
});
Переходим к нашему обработчику, который принимает и отдает обратно полученные поля. При правильной валидации, он соответственно, отправляет письмо на почту. Добиться такого не очень сложно, поэтому сразу рассмотрим.
Для начала нам нужно принять полученные данные методом POST и сделать проверку на переменную.
$post = (!empty($_POST)) ? true : false;
После чего поставим условие, если оно пройдено успешно, то переходим к телу обработчика скрипта.
if($post)
{
}
Обрабатываем полученные поля имя и телефон на спец символы, а также создаем переменную с пустым полем.
$name = htmlspecialchars($_POST['name']); $phone = htmlspecialchars($_POST["phone"]); $error = '';
После чего выполняем различные условия на валидацию имени и телефона.
if(!$name)
{
$error .= 'Введите имя!<br>';
}
function Phone($PhoneCheck)
{
$reg = "/^[0-9]{7,11}$/";
if($PhoneCheck == "") {
return false;
}
else {
$string = preg_replace($reg, "", $PhoneCheck);
}
return empty($string) ? true : false;
}
if(!$phone)
{
$error .= "Введите телефон!<br>";
}
if($phone && !Phone($phone))
{
$error .= "Номер телефона введен не корректно!<br>";
}
Далее, если валидация пройдена успешно, то отправляем письмо на почту.
if(!$error)
{
$subject ="Новая заявка";
$email ='info@roothelp.ru';
$message = '<strong>Имя:</strong> '.$name.'<br><strong>Телефон:</strong>'.$phone;
$mail = mail($email, $subject, $message, "From: RootHelp.ru <$email>\nReply-To: $email\nContent-type: text/html; Charset=utf-8\r\nContent-Transfer-Encoding: 8bit","-f $email");
if($mail)
{
echo"OK";
}
}
Если валидация не прошла проверку, то выводим ошибки.
else
{
echo '<div class="answer">'.$error.'</div>';
}
Как видим, все банально просто. Ничего лишнего и все по делу!
Нечего мне тут Вам особенного рассказывать, как просто, скопировать код с редактора и вставить его сюда. Думаю сами прекрасно все поймете.
input[type="submit"]{
padding: 7px 22px;
color: #ffffff;
background: #00a23d;
cursor: pointer;
}
input[type="submit"]:hover{
background: #FF3A65;
color: #fff;
}
input[type="text"]{
width: 200px;
padding: 8px 12px;
background: #efefef;
color: #000000;
}
.answer
{
margin: 20px 0;
}
Благодарю всех за внимание, спасибо что нас поддерживаете! Удачи всем в реализации своих проектов! Девушек с наступающим 8 марта!)