Как правильно сделать динамическую форму на jQuery?

Question

[Александр Андропов]

Доброго времени суток, друзья.
Есть задача: сделать форму добавления объявления.
1. По нажатию на кнопку, через jQuery в метод .append или .after подгружаю блок, в котором находится блок с радио-кнопками.
2. В зависимости от нажатого радио-кнопки, мне нужно выводить определенный блок (и соответственно удалять другой, которой был до этого) - как это реализовать ?
Хранить переменную, когда добавляется блок и потом методом .remove его удалять и добавлять новый ? Как сделать правильно, чтобы потом, всю эту форму методом POST по средствам PHP можно было отправить на сервер ?

Если можно, покажите пожалуйста пример, буду очень благодарен.

Примерно вот так должен выглядеть: https://www.cian.ru/razmestit-obyavlenie/

Заранее большое спасибо!

Comments

[Lord_Dantes]

По моему задавали уже такой вопрос.

Делаете полную форму со всеми инпутами, далее просматриваете событие change на чекбоксах и исходят из этого показываете другое поле.

[Александр Андропов]

s l a v e, а пример можно пожалуйста?

Answer 1

[Вадим]

Вариантов, на самом деле, несколько.
С учётом что у Вас jQuery, то предложу следующее:
Заведите переменную, отвечающую за состояние формы.
Состояние будет определять какую группу контролов показывать через css, например по data-атрибуту. (Ведёт к разбуханию CSS. Лучше тоглить JSом по соответствующему селектору);
Таким образом, например, можно менять значение дата атрибута на самой форме, а значение атрибута будет значение состояния.
Каждой группе контролов назначаем обработчик, который будет менять состояние на следующее. (В примере через делигирование).

Собственно.. ПРОФИТ.

Набросок примера. На работоспособность не проверял:

.form__input_stage{
      display: none;
    }
    
    .form[data-stage="1"] .form__input_stage[data-stage="1"]{
      display: block;
    }

    .form[data-stage="2"] .form__input_stage[data-stage="2"]{
      display: block;
    }

<form action="" class="form" data-stage="1">
      <input type="text" class="form__input">
      <input type="text" class="form__input form__input_stage" data-stage="1">
      <input type="text" class="form__input form__input_stage" data-stage="2">
</form>

var form = document.querySelector('.form');
    form.addEventListener('change', formChangeHandler);

    function formChangeHandler(evt){
      var stage = Number(evt.target.dataset.stage);
      var nextStage = stage+1;
      form.dataset.stage = nextStage;
    }