Всем привет. Появилась нужна в простейшем опроснике. Есть 3 радио-кнопки, когда выбрана одна из кнопок(не важно какая) и нажата кнопка “далее” показывался след. блок, а этот скрывался и так далее. Как можно реализовать?
<div id="q1" style="display: block;">
<form action="">
<p style="">1/10</p>
<h4>Испытываете ли вы боль в суставах после физических упражнений, долгой ходьбы, физической работы?</h4>
<div class="answer_s">
<input type="radio" id="answer" name="answer" value="answer_one">
<label for="often">Испытываю очень часто.</label>
</div>
<div class="answer_s">
<input type="radio" id="answer" name="answer" value="answer_two">
<label for="sometimes">Иногда бывает боль, но мне кажется, что пока беспокоиться не о чём.</label>
</div>
<div class="answer_s">
<input type="radio" id="seldom" name="answer" value="answer_thre">
<label for="answer">Бывает крайне редко.</label>
</div>
<button type="button" class="btn" >Далее</button>
</form>
</div>
<div id="q2" style="display: none;">
<form action="">
<p style="">2/10</p>
<h4>Испытываете ли вы боль в суставах после физических упражнений, долгой ходьбы, физической работы?</h4>
<div class="answer_s">
<input type="radio" id="answer" name="answer" value="answer_one">
<label for="often">Испытываю очень часто.</label>
</div>
<div class="answer_s">
<input type="radio" id="answer" name="answer" value="answer_two">
<label for="sometimes">Иногда бывает боль, но мне кажется, что пока беспокоиться не о чём.</label>
</div>
<div class="answer_s">
<input type="radio" id="seldom" name="answer" value="answer_thre">
<label for="answer">Бывает крайне редко.</label>
</div>
<button type="button" class="btn" onclick="showhide(closediv)">Далее</button>
</form>
</div>
</div>
К примеру реализуй ты это на реакт - как два пальца, там верстка строиться от данных тут только ручками отслеживать состояние опросника.и куда-то записывать а при открытии расставлять видимость на основе сохраненных данных опроса где-то в локалсторедж, либо взять готовые либы.
Если у тебя не будет зависимостей от выбранных ответов, и сам опросник будет статичным , то самый простой способ, как это сделать будет такой:
У каждого блока вопросов у тебя задан id (например id=“q2”), и в каждом блоке, я так понимаю, у тебя есть button “далее”, вот, этому самому button тебе можно задать data-attribut с именем id блока, который нужно открыть. Например у тебя будет в первом блоке:
Далее отлавливаешь событие по клику на эту кнопку и забираешь ее data-next-question, ищешь в form блок с id полученным из data-next-question и задаешь ему display : block, а текущий блок скрываешь.
P.S. каждый вопрос у тебя завернут в свою form, думаю это бессмысленно , сделай одну form и помести все вопросы туда, а ответы собирай в input hidden
Перемещение между вопросами я бы сделал не за счёт display, а родительскому элементу задал бы overflow: hidden; дочерним же задал ту же ширину, что и у родителя и сдвигал первый за счёт отрицательного margin-left.
Далее тут можно добавить анимацию и переход ещё и по свайпу, а не только по кнопке. С учётом валидации ;)
Прописывать правила валидации непосредственно в HTML самих элементов. Если это radio инпуты, то хотя бы required (если вопрос действительно пропускать нельзя) . Это в дальнейшем упростит и сократит код за счёт браузера https://codepen.io/chriscoyier/pen/mOzgBZ
Сделал бы только одну кнопку для перехода далее и вынес её за пределы формы. По спецификации любая кнопка выполняет роль submit. Что в данном случае не подходит. Сам же следующий шаг определялся бы из состояния хранимого внутри кода. Хоть просто переменная, хоть за счёт фреймворка. Вместо предложенного выше варианта хранить в атрибутах.
Как выше уже указал @A_Kustov лучше весь опросник обернуть в одну форму, а не дробить на несколько форм.
Для чего? Имея одну форму её будет проще сериализовать, чем ходить по всем инпутам скриптом и “вручную” собирать их значения.
Хотя конечно, зависит от задачи. Возможно, есть требование после каждого шага отправлять AJAXом данные на сервер для трекинга или ещё каких целей.