Форма обратной связи позволяет взаимодействовать с пользователями сайта. Одним из видов полей формы является переключатель(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 для второго блока).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 |
<h2>Переключатель radio со скрытыми полями</h2> <input type='radio' name='block1' id='r1' />один <div class='text' style="display:none;"><input type = "text" ><br> <input type = "text" ></div> <br> <input type='radio' name='block1' id='r2' />два <div class='text' style="display:none;"><input type = "text" > </div> <br> <input type='radio' name='block1' id='r3' />три <div class='text' style="display:none;"><input type = "text" > </div> <h2>Второй блок</h2> <input type='radio' name='block2' id='r4' />один <div class='text' style="display:none;">Текст 1</div> <br> <input type='radio' name='block2' id='r5' />два <div class='text' style="display:none;">Текст 2 </div> <br> <input type='radio' name='block2' id='r6' />три <div class='text' style="display:none;">Текст 3 </div> <script> //Считаем количество полей radio var radio = document.getElementsByClassName('text'); //считываем все поля radio var click = []; for (i=1; i<= radio.length; i++) { click[i]= document.getElementById('r' + i); } function clicking (click) { click.onclick=function() {Go()}; } function display (click, radio) { if (click.checked) {radio.style.display = 'block';} else {radio.style.display = 'none'; } } for (i=1; i<= radio.length; i++) { clicking (click[i]); } function Go () { for (i=1; i<= radio.length; i++) { display (click[i], radio[i-1]); } } </script> |
Для этого каждый тег <input type=’radio’> должен иметь свой id.
Дополнительные поля должны быть помещены в тег <div>, каждому тегу также присваивается одинаковый класс и стиль скрывающий этот блок style=»display:none;». Этот вариант подошел для реализации на сайтах uCoz в модуле почтовые формы
Вариант 2
Этот вариант применяется в том случае когда нет доступа к тегам <input type=’radio’>, но есть возможность присвоить id всему внешнему блоку, в который они помещены. В скрипте это блок <div id=»clicks»> Такой вариант у меня возник, когда я использовала этот скрипт для плагина WordPress Contact Form 7.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
<h2>Переключатель radio со связанными полями</h2> <div id="clicks"> <p><input type='radio' name='test' />один </p> <p><input type='radio' name='test' />два </p> <p><input type='radio' name='test' />три </p> </div> <div id='text1' style="display:none;"><input type = "text" ><br> <input type = "text" ></div> <div id='text2' style="display:none;"><input type = "text" > </div> <div id='text3' style="display:none;"><input type = "text" ><br><input type = "text" ><br><input type = "text" > </div> <script> var click = []; click[0] = document.getElementById('clicks').children[0].children[0]; click[1] = document.getElementById('clicks').children[1].children[0]; click[2] = document.getElementById('clicks').children[2].children[0]; //функция добавления события onclick тегам input function clicking (click) { click.onclick=function() {Go()}; } for (i=0; i<=(click.length-1); i++) { clicking (click[i]); } //функция показа/прятания блока информации function display (click, radio) { if (click.checked) {radio.style.display = 'block';} else {radio.style.display = 'none'; } } //функция исполнения скрипта function Go () { for (i=0; i<=(click.length-1); i++) { display (click[i], document.getElementById('text' + (i+1))); } } </script> |
Обязательными условиями этого варианта являются:
- теги 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) — любое имя на ваше усмотрение. Оно и будет употребляться в скрипте.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<h2>Переключатель radio с всплывающими полями</h2> <input type='radio' name='test' id='r1' onclick='Go()' />один <div id='text1' style="display:none;"><input type = "text" ><br> <input type = "text" ></div> <br> <input type='radio' name='test' id='r2' onclick='Go()' />два <div id='text2' style="display:none;"><input type = "text" > </div> <br> <input type='radio' name='test' id='r1' onclick='Go()' />три <div id='text3' style="display:none;"><input type = "text" > </div> <script> //нужно задать переменные var radio = []; radio[0] = document.getElementById('text1'); radio[1] = document.getElementById('text2'); radio[2] = document.getElementById('text3'); function display (radio) { radio.style.display=(radio.previousElementSibling.checked)? 'block': 'none'} function Go() { for (i=0; i<=(radio.length-1); i++) { display (radio[i]); } } </script> |
Разберем код подробнее:
- скрипте выше три переключателя. Вы можете сделать сколько угодно. Главное каждому переключателю, в котором должен использоваться скрипт необходимо добавить вызов функции скрипта:
1onclick='Go()' - Когда добавляется новые переключатель, за ним сразу должен следовать следующий блок div
123<div id=' ' style="display:none;"></div>
id — идентификатор (уникальное имя): любое слово написанное латиницей. - Скрытым могут быть не только дополнительные текстовые поля, но и любая информация помещенная внутри тегов div.
- При добавлении новых полей нужно также добавить переменные в самом скрипте
1var name = document.getElementById('idname');
name — задаете любое имя переменной;
idname — соответствует идентификатору (id) блока div
Здравствуйте. Как сделать 2 таких блока? У меня либо в первом раскрываются поля либо во втором. А чтобы оба работали вместе не получается. Спасибо.
Михаил!
Код для двух блоков тут: http://js.do/natrud/173718
Также я внесла изменения в статью, и теперь в первом примере есть код, с двумя блоками.
Спасибо, пригодилось.
Олеся, я очень рада!