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

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

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

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

Получилось это так:

Переключатель radio
один
два
три

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

Вариант 1

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

Для этого каждый тег <input type=’radio’> должен иметь свой id.
В скрипт вводятся дополнительные переменные где и прописываются все id, это переменные click 1, click 2, click 3.
Дополнительные поля должны быть помещены в тег <div>, каждому тегу также присваивается свой id и стиль скрывающий этот блок style=»display:none;». В скрипте переменные соответствующие скрытым полям это radio1, radio2, radio3. Этот вариант подошел для реализации на сайтах 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

    • Также, в самом скрипте нужно добавить еще одну строку в функцию Go ()

      name — заданное ранее имя переменной;

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


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

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

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

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

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