Уважаемые читатели сайта 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 Просмотров: 40750

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

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

Посмотреть предыдущие комментарии (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, запустил через браузер. Отправил письмо, сообщение не пришло. Как правильно сделать, чтобы работало все?
Добавить новый комментарий

Автор:

Текст сообщения:

Если в комментарии присутствует код, пожалуйста вставляете его между тегами [code][/code]

cap

Код с картинки:


Получать уведомления о новых комментариях по Email могут только зарегистрированные пользователи.

41001346159934
R314489888859
Уроки
Для начинающих
Интересное
Файлы
Полезное
Опрос

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

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