Как сделать форму из 4-х этапов и передавать данные в каждый из них?

Question

[Mike223344]

Привет. У меня на сайте есть модуль бронирования, состоит из 4-х этапов.

на 1 этапе узнаем даты бронирования и количество гостей
на 2 этапе в зависимости от этих данных показываем номера
на 3 этапе запрашиваем контактные данные
на 4 этапе Завершение, просто вывод данных

Я не хочу делать чтобы это было как отдельные страницы, нужно чтобы без перезагрузки менялся этап, html содержимое и передавать данные. Знаю что можно через ajax. Но как сделать чтобы правильно было?
Пример https://rehoekb.ru/booking

Answer 1

[Dimanokum]

Как правильно - не знаю) Я бы сделал невидимые формы и скрывал/показывал по необходимости (заполнению анкеты). Аякс в любом случае нужен,

Answer 2

[strelok011]

Любая динамика с данными в окне браузера - нужен js. Работа в асинхронном режиме - таки да, это AJAX. Только сам термин ничего не объясняет.

Писать можно хоть на нативном js, можно подключать фреймворки типа jQuery, Vue, React и проч.
Вам придется хранить состояние формы (значения полей, ответы от бэкенда, служебные данные типа шага формы и др.), писать / использовать готовые модули для работы с календарем, отправлять запросы на эндпойнты бэкенда в асинхронном режиме, вешать крутилки (спиннеры) пока ожидается завершение запроса, перестраивать структуру документа чтоб отображать / скрывать шаги формы, писать валидацию заполнения данных, чтобы пользователь вводил только ожидаемые значения.
Готового "воткнул - работает" не найти, такие решения исключительно под конкретные требования пишутся.