Input radio со связанными полями

Форма обратной связи позволяет взаимодействовать с пользователями сайта. Одним из видов полей формы является переключатель(radio).

Задача: В зависимости от выбранного переключателя radio необходимо, чтобы под ним появлялись дополнительные текстовые поля формы.

Если выбрано radio1 то появляется поле1 (или любая информация), если выбрано radio 2 = поле 2 и т.д.

Получилось это так:
Переключатель radio

один
два
три

Реализация
Задача реализовывалась с помощью Javascript. В зависимости от строения самой формы и тегов <input type=”radio”> получилось несколько вариантов скрипта. Обязательным условием всех скриптом является то, что связанные поля изначально скрыты с помощью стиля display:none.
Во всех вариантах сколько полей столько переменных.

Вариант 1

Этот вариант самый простой. Он используется, если у веб-разработчика есть полный доступ ко всем тегам формы. Тогда нужно присвоить отдельные id каждому тегу <input type=”radio”>, в данном случае r1, r2, r3. а блокам информации присваивается отдельный класс – text, самим кнопкам radio для одного лока присваивается имя block1 (или же  block2 для второго блока).

Для этого каждый тег <input type=’radio’> должен иметь свой id.
Дополнительные поля должны быть помещены в тег <div>, каждому тегу также присваивается одинаковый класс и стиль скрывающий этот блок style=”display:none;”.  Этот вариант подошел для реализации на сайтах uCoz в модуле почтовые формы

Попробовать в редакторе

Вариант 2

Этот вариант применяется в том случае когда нет доступа к тегам <input type=’radio’>, но есть возможность присвоить id всему внешнему блоку, в который они помещены. В скрипте это блок <div id=”clicks”> Такой вариант у меня возник, когда я использовала этот скрипт для плагина WordPress Contact Form 7.

Обязательными условиями этого варианта являются:

  • теги input radio должны быть заключены в отдельный блок со своим собственным id, в примере <div id=”clicks”>;
  • каждый тег input radio должен быть внутри других тегов. Это могут быть теги <p>…</p>, как в примере, или <span>…</span> или другие;
  • Больше никаких других тегов внутри блока <div id=”clicks”> быть не должно
  • Ну и конечно, обязательно каждое скрытое поле (или др информация) должно быть внутри тега <div> со стилем display:none;

Попробовать в редакторе

Вариант 3

С этого варианта все начиналось. Этот скрипт получился достаточно запутанный, именно на смену ему я и создала первые два варианта, но я решила оставить его в этой статье для примера, так как его создание очень подробно описано. Особенность его является то, что тег <input type=’radio’> является соседним к тегу скрытого поля, и индентифицируется с помощью previousElementSibling.
Обязательные условия для работы скрипта

  • В разметке HTML скрытые поля (или любая другая скрытая информация) должны быть помещены между тегами div
  • Тег div обязательно должен располагаться сразу после соответствующего тега input, так как в скрипте используется previousElementSibling. Это обязательное условие.
  • Самому тегу div изначально заданный стиль display:none;
  • Тегу div нужно задать идентификатор (id) – любое имя на ваше усмотрение. Оно и будет употребляться в скрипте.

Разберем код подробнее:

  • скрипте выше три переключателя. Вы можете сделать сколько угодно. Главное каждому переключателю, в котором должен использоваться скрипт необходимо добавить вызов функции скрипта:
  • Когда добавляется новые переключатель, за ним сразу должен следовать следующий блок div

    id – идентификатор (уникальное имя): любое слово написанное латиницей.
  • Скрытым могут быть не только дополнительные текстовые поля, но и любая информация помещенная внутри тегов div.
  • При добавлении новых полей нужно также добавить переменные в самом скрипте

    name – задаете любое имя переменной;
    idname – соответствует идентификатору (id) блока div

Попробовать в редакторе


Подпишитесь на RSS канал - если Вы хотите первыми узнавать о новых статьях на сайте!!!

Статьи по теме:

5 комментария

  1. Здравствуйте. Как сделать 2 таких блока? У меня либо в первом раскрываются поля либо во втором. А чтобы оба работали вместе не получается. Спасибо.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *