V
V
Vic Shostak2017-08-17 14:03:56
Django
Vic Shostak, 2017-08-17 14:03:56

Django + Vue.js What is the best way to organize a multi-step form?

Good day!
Q: What is the best way to organize the step-by-step form that a site visitor fills out? It is the technical side that is of interest - through Django (with saving steps in the session) or Vue.js (completely on the client). Maybe there are use cases or best practices? I just can't figure out how to do it better...
The form fields depend on each other, that is, each next step is generated based on what the user selected in the previous one. For example, here is a tree:

ШАГ 1: Тип визы
1.1. Бизнес
1.2. Туристическая

ШАГ 2: Если Бизнес
2.1. ФИО и прочая общая инфа
2.2. Данные о работе и бизнесе
2.3. Инфа о принимающей стороне
... (ещё 10+ полей, только для бизнес)

ШАГ 2: Если Туристическая
2.1. ФИО и прочая общая инфа
2.2. Название и адрес гостиницы
2.3. Данные о предыдущих тур. визах
... (ещё поля, только для туристических)

ШАГ 3: Выбор способа оплаты (не зависит от предыдущего выбора) и переход на агрегатор для оплаты
ШАГ 4: (редирект с агрегатора) Страница "Спасибо за оплату и бла бла бла"

ADD : All fields except 2.1 in step #2 will be written to Postgres as JSONField().
I will be glad to sensible comments. Thank you.

Answer the question

In order to leave comments, you need to log in

1 answer(s)
E
Evgeny Kulakov, 2017-08-17
@vikkyshostak

Purely vue solution:
Create a json file with a list of steps, fields, describe the transition logic in it.
When you enter the page, get this file, parse, build fields, progressbar, etc.
Here you need to be ready to reload the page, and possibly store intermediate data in localstorage for example.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question