Отправка формы без перезагрузки страницы

Сергей Макаров | 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);
		}