Уважаемые читатели сайта Ajaxs.ru

Очень рад что вы зашли на мой сайт. Надеюсь, Вы сможете найти здесь для себя полезную информацию. Зарегистрировавшись на сайте вы получаете ряд преимуществ:
1. При комментировании Вам не нужно вводить имя и капчу с картинки
2. Вы можете получать уведомления на Email к интерисующим вас урокам
3. Вы можете редактировать свои комментарии

Вход на сайт


Забыли пароль



Восстановление пароля


Войти на сайт

Зарегистрироваться

Главная / Уроки по AJAX / Просмотр урока

     

Создание сайтов


Вам нужен небольшой сайт или просто хотите доработать уже существующий? | Подробнее

Контактная форма с использованием AJAX

В этом уроке мы поговорим, как на своем сайте сделать контактную форму для отправки сообщений на E-mail автору сайта при помощи технологий AJAX. Результат будет виден сразу, как только пользователь введет все данные и нажмет кнопку отправить, будь он положительным или отрицательным. Ну что ж преступим к созданию.

Пример

Для начала на странице создадим саму форму:

<div id="contactFormArea">
<form
action="#" method="post" id="cForm">
<fieldset>
<label
for="posName">Имя:</label>
<input
class="text" type="text" size="25" name="posName" id="posName">
<label
for="posEmail">Email:</label>
<input
class="text" type="text" size="25" name="posEmail" id="posEmail">
<label
for="posText">Сообщение:</label>
<textarea
cols="50" rows="5" name="posText" id="posText"></textarea>
<label>
<input
class="submit" type="submit" name="sendContactEmail" id="sendContactEmail" value="Отправить">
</label>
</fieldset>
</form>
</div>

Сразу над той формой вставим блоки, которые будут отображаться во время отправки сообщения и статус отправки:

<p id="loadBar" style="display:none;">
<strong>
Сообщение отправляется… </strong>
<img
src="img/working.gif" alt="Отправка..." title="Sending Email">
</p>

<p
id="emailSuccess" style="display:none;">
<strong
style="color:green;">Сообщение отправлено</strong>
</p>

Теперь подключим на страницу несколько нужных javascript-ов и необязательную таблицу стилей между тегами <head></head>

<script type="text/javascript" src="js/functionAddEvent.js"></script>
<script
type="text/javascript" src="js/contact.js"></script>
<script
type="text/javascript" src="js/xmlHttp.js"></script>
<link
rel="stylesheet" type="text/css" href="style.css">

Теперь посмотрим, как устроен наш обработчик xmlHttpRequest.php, который находится в папке script. В этом файле нужно изменить значение переменных $yourName – имя автора сайта , $yourEmail – его Email ну и $posConfirmation – сообщение, в котором будет выводиться положительный или отрицательный ответ после отправки. Теперь рассмотрим, как он работает. Все данные из формы проверяются contact.js и передаются обработчику. Там происходит проверка введенного Email и переменных из скрипта contact.js. Если все ок, то в переменную $posConfirmation заносится сообщение об успешном выполнении и снова отправляются contact.js, который и выводит его на экран. Если же условие не выполняется, то в $posConfirmation заносится ошибка и также выводится на экран.

Далее посмотрим, как устроен contact.js, для этого откроем его. В самом начале идет проверка на существование переменных из полей. Затем все данные передаются функции sendPosEmail, в которой указан обработчик, в адресе которого так же передаются переменные contact и xml они то и проверяются в обработчике. Затем идут небольшие проверки, после которых начинается функция showContactTimer и значение sentTimer, в котором можно указать время отображения блока, сообщающего, что идет отправка (я поставил 800). Чуть ниже (строка 72) в success.innerHTML попадает сообщение из обработчика и выводится на экран. Теги и стили в этой строке можете изменить на свои, а также добавить необходимые блоки и теги переноса.

Ну вот и все, что я хотел рассказать в этом уроке.

Автор: Евгений Бочкарев Урок добавлен: 21 Августа 2010 в 12:24 Просмотров: 44906

Условия копирования материалов сайта

Все комментарии

Посмотреть предыдущие комментарии (19)

#20 Евгений 15-02-2012 в 22:12
На сайте есть урок про восстановление пароля в категории php
#21 настя 05-06-2012 в 13:52
А как добавить другие поля?
Пытаюсь вставить поле hidden, а оно не передается на почту
#22 Евгений 05-06-2012 в 13:58
Используйте лучше скрипт "Отправка сообщений при помощи AJAX" он есть на сайте. Он более прост в понимании и настройке.
#23 настя 05-06-2012 в 19:54
Там с базой данных, а мне она не нужна.
#24 настя 05-06-2012 в 22:30
я нашла как добавить.
только еще - не работает кнопка - оформить заказ, вы не делали её, или я чтото упустила?
вобщем я сделала что при нажатии на офрмить заказ на этой же страничке появляется div в нем анкета, с ajax. он оправляет письмо админу на почту, однако при отправлении на почту заказа должна по сути очищаться корзина, но я что-то не могу понять, как мне в php файле оправления письма на почту вызвать еще функцию очистки корзины, чтобы она очищалась также как при нажатии на кнопку "очистить корзину"
#25 настя 05-06-2012 в 22:35
да уж запуталась в скриптах. извините за беспокойство)
#26 Александр 28-01-2013 в 00:01
Присылает на почту сообщения с битой кодировкой. Помогите, пожалуйста поправить.

header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="utf-8" standalone="yes"?>';

echo '<resultset>';


// Проверяем переменные contact и xml поступившие из скрипта contact.js, а так же правильность введенного Email
if ( $_GET['contact'] == true && $_GET['xml'] == true && isset($_POST['posEmail']) && preg_match("/^[a-zA-Z0-9_\.\-]+@([a-zA-Z0-9\-]+\.)+[a-zA-Z]{2,6}$/", $_POST['posEmail']) && isset($_POST['posText']) && isset($_POST['posName'])) {


$name = $_POST['posName'];
$email = $_POST['posEmail'];
$mess = $_POST['posText'];


$subject = "Сообщение из контактной формы";
$message = "Имя пославшего письмо: $name .\nЭлектронный адрес: $email\nСообщение: $mess";
$mailit = mail($yourEmail, $subject, $message, "Content-type:text/plain; Charset=windows-1251\r\n");

if ( @$mailit ){
$posStatus = 'OK'; $posConfirmation = 'Спасибо ваше сообщение отправлено';
}

}
//Если условие не выполняется то выдаем ошибку
else{
$posStatus = 'NOTOK'; $posConfirmation = 'Возникла ошибка при отправке сообщения';
}


echo '
<status>'.$posStatus.'</status>
<confirmation>'.$posConfirmation.'</confirmation>
';
echo' </resultset>';
?>



На сайте используется 1251
#27 Александр 08-06-2013 в 01:27
Хорошая форма, жаль в подсказках кодировку не удалость реанимировать
#28 Серж 10-06-2013 в 18:44
Добрый день.
Сделал как написано.
В получаемом через форму письме отсутствует почта отправителя и имя, хотя в форме есть.
В чем причина?


#29 Andrew 20-05-2015 в 21:07
ммм...я очень не опытный программист. На локальный сервер добавил исходник из этого урока, изменил в файле e-mail, запустил через браузер. Отправил письмо, сообщение не пришло. Как правильно сделать, чтобы работало все?
41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

Много ли среди программистов девушек?

Последние комментарии
Ссылки