Как менять форму на javascript?

Question

[pavel010101]

Все привет.
У меня есть попап, в нем есть select с возможностью пополнить средства, 4 варианты выбора
ну и плюс внизу есть форма. Я тут заморочился, решил попробовать сделать select на scss/ js Получилось , вот только я теперь не понимаю , как мне при выборе определенного значения показывать корректную форму заполнения данных?
структура в попап выглядит вот так

<div class="select">
            <div class="header">
              <span class="current" id="currentSelect">вариант оплаты1</span>
            </div>
            <div class="select__body">
              <div class="select__body-item">вариант оплаты1</div>
              <div class="select__body-item">вариант оплаты2</div>
              <div class="select__body-item">вариант оплаты3</div>
              <div class="select__body-item">вариант оплаты4</div>
            </div>
          </div>
<form class="form1" action="#" id="pay1">
     <input class="form1__tel-input" type="text" />
            <input class="form__subbmit" type="submit" value="Вывести"/>
          </form>
<form class="form2" action="#" id="pay2">
     <input class="form2__tel-input" type="text" />
            <input class="form__subbmit" type="submit" value="Вывести"/>
          </form>

вопросов несколько
1. Не слишком ли заморочено select(в принципе могу переделать, добавить плагин formstyler) ? могут ли возникнуть проблемы при отправке формы (c тем select который сейчас) ?
2. Как на javascript сделать так чтобы при выборе например "вариант оплаты2" появилась вторая форма(form2) а первая скрылась?
Спасибо за помощь !!!!

Answer 1

[Алексей]

Самый простой вариант: При загрузке страницы, если select имеет пустое значение - прячете все формы (display: none;/visibility:hidden;), если же в select пустых значений нет, то в select по умолчанию выбран первый вариант, форма соответствующая варианту видна, остальные скрыты. Каждый вариант в select имеет значение равное name формы, при выборе варианта скрываете все формы, показываете выбранную по name.

Накатал на коленке с использование jquery, можно и на vanilla написать, но мне лень, думаю идея и так ясна)


Вариант посложнее: При выборе варианта грузите соответствующую форму ajax'ом в заготовленный контейнер.

Comments

[pavel010101]

Спасибо большое!