Как создать многоэтапную веб-форму?

Я пытаюсь создать веб-форму с несколькими этапами. Я рисую это с помощью веб-формы с переполнением стека/стека Exchange. Проблема в том, что я не уверен, как вызвать действие "следующего этапа".

Чтобы проиллюстрировать, если вы хотите пометить вопрос о переполнении стека, нажмите flag, а затем всплывающее окно предложит вам сделать выбор. Если вы выберете второй вариант ( "он здесь не принадлежит, или это дубликат" ), форма автоматически перенесет вас на второй экран.

Первый экран:

После щелчка, он автоматически перенаправляет на:

Проблема в том, что я не знаю, что такое основной триггер. Как щелчок по этой кнопке переадресовывает конечного пользователя на следующий экран?

Я попытался проверить источник, но у меня есть ощущение, что я вижу только половину картинки:

Никаких учебников по HTML, которые я нахожу, не имеет никакого примера практики, подобного этому. Я подозреваю, что это JavaScript, но я не могу найти связанный файл .js, который будет запускать эти действия.

Итак: Как автоматическая переадресация веб-формы при нажатии? В качестве продолжения, если она использует JavaScript, есть ли способ обхода HTML/CSS, который я могу использовать?

Ответ 1

Это может помочь подумать об этом на более низком уровне, чем рамки. Существует два способа сделать многоэтапную форму.

Первым (и, как правило, более старым) способом является сохранение состояния на сервере. Каждый этап формы на самом деле является отдельной формой, и клиент просматривает вопросник на сервере (например, как часть данных сеанса).

Второй способ (более современный) - использовать JavaScript, как вы подозревали. В этом случае на самом деле очень мало черной магии, и авто-переадресации на клики вообще нет. Все, что вы делаете, это одна очень длинная форма, в которой вы показываете/скрываете некоторые элементы в зависимости от выбора пользователя (конечно, вы можете иметь несколько элементов <form>, которые вы показываете/скрываете).

Ответ 2

Ну, я бы использовал какой-то плагин jQuery wizard и адаптировал его к моим потребностям. Я сделал это совсем недавно, и это было не так сложно. Вы должны попробовать SmartWizard 3.0, это довольно активно, последняя версия была около 2 месяцев назад, и кодеры очень быстро ответили на мои вопросы.

Вот он: https://github.com/mstratman/jQuery-Smart-Wizard

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

Удачи:)