urukhayВсем привет!

Есть некая процедура с пошаговым заполнением html-формы.
Пусть это будет покупка товара, состоящая из трех шагов:

Шаг 1: вводим e-mail
Шаг 2: вводим личные данные
Шаг 3: подтверждаем данные, введенные на шаге 1-2

После этого данные отправляются на внешний ресурс - в платежную систему.

На каждом шаге есть кнопка "Вперед", отправляющая пользователя к следующему шагу.
Это, естественно, сильно упрощенный пример.
Вопрос идейный: каким способом реализовать навигацию между шагами.

Вариант 1. С перезагрузкой страницы. При нажатии кнопки "Вперед" данные отправляются на сервер методом POST, вытаскиваются оттуда, обрабатываются, запоминаются, и отображается форма с новыми полями следующего шага

Вариант 2: С ajax-подгрузкой новой формы. Данные также отправляются на сервер, но аяксом, без перезагрузки страницы. И после всех обработок в блок с текущей формой подгружается форма с новыми полями следующего шага.

Вариант 3: С с помощью JS. В html выводим 3 div, в каждом из которых - нужный шаг. Второй и третий div делаем display:none. И при нажатии на кнопку "Вперед" текущий div скрываем, следующий - отображаем.

Руки тянутся к варианту 3. Что скажете? Можно так делать? Есть какие-то особенности, подводные камни?
Понятное дело, все зависит от задач. Но основные условия и требования я рассказал.

Заранее спасибо.

Проще всего в реализации - это отправка запроса POST с перезагрузкой страницы (синхронные запросы). Ввёл данные, нажал на "Далее" или "Вперёд" и вуаля, заполняй следующую форму.

Наиболее userfriendly - асинхронные запросы (ajax). То есть жмакнул "Далее", данные с первого шага зафиксировались, и добавилась форма для второго шага... ну итак далее. Первый шаг, кстати, я бы не стал скрывать.


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

2) С учётом первого шага невозможно реализовать показ/скрытие блоков с полями. Придётся или отправлять одну и ту же форму по частям, что усложнит её приём на сервере, или же делать несколько форм, что усложнит их общую отправку на последнем шаге (форму в форму вкладывать запрещено, потому обернуть всё в одну общую форму не получится)


Потому я бы выбрал один из первых двух вариантов, но дальше выбор зависит уже строго от задачи (требований) и личных предпочтений.

vkle,

Если это средненькая или подвальная конторка, которая пилит сайты, то такие компании очень часто на уступки заказчику идут. Я уже не помню когда последний раз проект заканчивал строго по ТЗ.

И вот тут самое интересное... Когда каждый следующий допил будет расти в стоимости по экспоненте (а с озвученным подходом так и будет), и заказчик и руководство начинают задаваться ненужными вопросами. Никого не интересует специалист, который проектирует продукт так, что бы его доработка занимала 20 часов вместо часа. И если это руководящая должность, то такой сотрудник там не на долго :)

P.S. Не забываем про энтузиазм и сознательность самого разработчика. Меня, например, не очень радует выталкивать продукт низкого качества... когда в нём не то что нет хороших решений, а когда его стыдно показывать на собеседовании или другу. Как-то не очень весело на вопрос "а почему тут так топорно сделал" отвечать "зато быстро". Намного приятнее хвастаться гениальностью своих решений, даже если они были дорогостоящими (что зачастую и удешевляет последующую разработку).