Сохранение веб-формы при переходе по любой ссылке

Веб-формы — неотъемлемый атрибут любого более-менее сложного сайта. А уж интернет-магазин без них невозможно и представить. Часто формы бывают довольно внушительных размеров и нету ничего ужаснее для пользователя, чем заполнить форму, а потом случайно щелкнуть по какой-нибудь ссылке и потерять всю заполненную информацию. После такого многие пользователи, расстроившись, могут вообще уйти с сайта. А этого допустить нельзя, поэтому мы постараемся, так сказать, минимизировать потери заполненной информации.

Классический вариант выглядит так: у нас есть форма с полями, пользователь заполняет их, жмет «Далее» и переходит на следующий этап заказа. При этом данные сохраняются только после щелчка по этой кнопке. Допустим, пользователь ввел все данные, но его заинтересовал какой-то раздел сайта, к примеру, «Контакты». Он нажимает на ссылку, смотрит контакты, возвращается к оформлению заказа и видит, что введенных им данных нигде нет.

Эту проблему можно решить с помощью сохранения данных при переходе по любой ссылке, а не только кнопке «Далее». Разумеется, такой механизм должен быть максимально простым, не затрагивать верстку, не быть видимым пользователю и быть подключаемым к любой странице.

Допустим, у нас есть форма:

01
02
03
04

<form id="personalForm"> 
<input type="hidden" name="redirectTo" id="redirectTo"> 
…
</form>

При щелчке по любой ссылке ее данные должны отправляться на сервер и сохраняться. Для этого нам надо перехватывать клики по всем ссылкам. Сделать это очень просто, особенно на jQuery:

01
02
03
04

$("a").click(function(){
	onLinkClick ($(this).attr("href"));
	return false;
});

Тут мы при щелчке по любой ссылке вызываем функцию onLinkClick(), передаем в нее атрибут href ссылки и возвращаем false, чтобы не произошло ненужного нам перехода браузером по этой ссылке. Функкция onLinkClick() тоже очень простая:

01
02
03
04

function onLinkClick (href){
	$("#redirectTo").val(href);
	$("#personalInfoForm").submit();
}

Тут мы выполняем всего 2 действия: подставляем в скрытое поле значение ссылки и отправляем форму. Теперь к нам на сервер должна придти форма со всеми заполненными значениями и со ссылкой по которой пользователь решил перейти. От нас требуется сохранить все данные и просто редиректить пользователя на ссылку, пришедшую в поле redirectTo. Упрощенный пример действия для Zend Framework выглядит так:

01
02
03
04
05
06
07
08
09
10
11

public function personalAction() {
	// Если была отправлена форма
	if ($this->_request->isPost()) {
		$formData = $this->_request->getPost();		
		/*
 		 * сохраняем данные в БД
		 */
		// Редиректим на страницу		
		$this->_redirect($formData['redirectTo']);
	}
}

Как видите, механизм вышел очень простым и действенным. Особый плюс, что все ссылки в строке состояния отображаются нормально, без всяких лишних параметров. Также, все манипуляции по сохранению формы делаются в том же контроллере и действии, которые выводят страницу с формой. Все очень компактно, удобно и лаконично.

Если у вас есть свой вариант для решения этой проблемы — добро пожаловать в комментарии!