fbpx
Перейти к содержимому

Input radio со связанными полями с помощью JavaScript

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

Input 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 для второго блока).

Больше статей:   Таблица умножения на Javascript

Для этого каждый тег <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

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

5 комментариев для “Input radio со связанными полями с помощью JavaScript”

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

Добавить комментарий для Natalie - Step For Top Отменить ответ

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