Отправка формы без перезагрузки страницы
03.08.2012
| Часто возникает необходимость отправки формы без перезагрузки страницы. В этом случае на помощь приходит технология ajax и фреймворк jQuery.
Например имеем форму следующего вида:
<form method="" name="osForm" action="" id="osForm"> <input class="osForm_input" tabindex="1" id="name" name="name" type="text" value="*Ваше имя" /> <input class="osForm_input" tabindex="2" id="email" name="email" type="text" value="*Ваш email" /> <input class="osForm_input" tabindex="3" id="address" name="address" type="text" value="*Адрес доставки (индекс,область,город,улица,дом,квартира)" /> <input class="osForm_btn" tabindex="4" type="submit" name="sndbtn" value="Отправить" /> </form>
Чтобы отправить эту форму без перезагрузки страницы, используем javascript:
$('#osForm').submit(function(e){ e.preventDefault(); $.ajax({ url: "sendOrderForm.php", type: "POST", data: $('#osForm').serialize(), success: function(response) { //обработка успешной отправки }, error: function(response) { //обработка ошибок при отправке } }); });
sendOrderForm.php — файл, который обрабатывает пересылаемые формой данные. Например он может быть таким:
if (isset($_POST['username'])){ $name = $_POST['username']; $contacts = $_POST['contacts']; $message = $_POST['message']; $from = 'no-reply@yandex.ru'; $mailTo='mail@yandex.ru'; $headers = "From: Иван Петров <$from>\nReply-To: $from\n"; $headers .= 'Content-type: text/html; charset=utf-8' . "\r\n"; $message=" <h1>Сообщение с сайта</h1> <p>Имя: $name</p> <p>Контакты: $contacts</p> <p>Сообщение: $message</p> "; wp_mail($mailTo,"Форма обратной связи",$message,$headers); }