Переключатель radio со скрытыми полями на сайтах uCoz

Иногда в Форме обратной связи нужно добавить разные вопросы (поля) в зависимости от уже данного ответа. Эти самые разные вопросы в Форме лучше сделать скрытыми. Предлагаю вам свой простой скрипт как лучше это сделать именно на сайтах uCoz.

Выглядеть это будет так:
Переключатель radio

Подробнее о самом скрипте Вы можете прочитать в Уроках Javascript. Там я описывала логику создания и работы самого скрипта.
В этой статье я буду подробнее описывать как применить скрипт на сайтах uCoz. Как я ни старалась создать этот скрипт наиболее доступным и понятным для новичков, знания HTML все же необходимы.

Создание переключателя radio со скрытыми полями на сайтах uCoz

Прежде всего нужно продумать логику самого переключателя. Я буду показывать все на примере.

Создать поля в Форме обратной связи

Подробно как создавать поля в форме обратной связи на сайтах uCoz вы можете прочитать в статье как создавать поля и пользоваться модулем Почтовые формы .

В форме обратной связи создаем нужные поля.

• Поле типа radio.
  При создании поля radio заполняем следующим образом:
  Тип поля – radio.
  Название поля – тот текст, который будет видеть пользователь непосредственно перед самим полем. В моем примере: “Плательщик”
  Значения – эта графа появляется, если тип вашего поля checkbox, select или radio. В моем примере будет два значения:
  – юридическое лицо;
  – физическое лицо;
  Обязательное поле – поставьте галочку, если Пользователю поле нужно заполнить обязательно.
  
• Под этим полем сразу создаем необходимое количество текстовых (или других полей). Показываю на моем примере:
  – Юридическое название компании (согласно уставным документам): ;
  – Код ЕГРПОУ: ;
  – ФИО плательщика: ;
  Всего у меня три отдельных текстовых поля. Эти и поля станут в итоге скрытыми в дальнейшем.
  

Отредактировать поля формы, чтобы сделать их скрытыми

Вот тут Вам и понадобятся знания HTML. Тут нужно быть очень внимательным.

Переходим в шаблон формы обратной связи. Для этого нажимаем иконку

Моя форма выглядит так:

<table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
<tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Тема письма:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Текст сообщения <font color="red">*</font>:</td><td><textarea rows="7" name="f3" cols="30" style="width:95%;"></textarea> </td></tr>
<tr><td>Как Ваши дела? <font color="red">*</font>:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>


<tr><td>Плательщик <font color="red">*</font>:</td><td><input id="fr51" type="radio" name="f5" value="Компания"> <label for="fr51">Компания</label><br /><input id="fr52" type="radio" name="f5" value="Частное лицо"> <label for="fr52">Частное лицо</label><br /></td></tr>
<tr><td>Юридическое название компании (согласно уставным документам):</td><td><input type="text" name="f6" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>Код ЕГРПОУ:</td><td><input type="text" name="f7" size="30" style="width:95%;" maxlength="70"> </td></tr>
<tr><td>ФИО плательщика:</td><td><input type="text" name="f8" size="30" style="width:95%;" maxlength="70"> </td></tr>


<tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение"></td></tr>
</table>

Форма на uCoz является таблицей. Каждое поле находится внутри тегов <tr> и <td>
В эту таблицу нужно внести следующие изменения:

• Все поля radio имеют автоматически собственный id, это очень хорошо, их нужно запомнить.
• В поля, которые будут скрытыми, нужно добавить <div style=”display:none;”> и присвоить каждому индивидуальное id.
  Для каждой строчки это получается так. Я перенесла всю информационную часть во вторую колонку (вторые теги <td>), первые оставила пустыми. И поместила всю информационную часть внутри тега div, которому присвоила id=”text1 и стиль style=”display:none; :

  <tr>
            <td></td>
            <td>
  <div style="display:none;" id="text1">Юридическое название компании (согласно уставным документам):<br><input type="text" name="f6" size="30" style="width:95%;" maxlength="70"> </div>
            </td></tr>

  А в моем примере вся форма выглядит так:

  <table border="0" width="100%" id="table1" cellspacing="1" cellpadding="2">
  <tr><td width="35%">E-mail отправителя <font color="red">*</font>:</td><td><input type="text" name="f1" size="30" style="width:95%;" maxlength="70"> </td></tr>
  <tr><td>Тема письма:</td><td><input type="text" name="f2" size="30" style="width:95%;" maxlength="70"> </td></tr>
  <tr><td>Текст сообщения <font color="red">*</font>:</td><td><textarea rows="7" name="f3" cols="30" style="width:95%;"></textarea> </td></tr>
  <tr><td>Как Ваши дела? <font color="red">*</font>:</td><td><input type="text" name="f4" size="30" style="width:95%;" maxlength="70"> </td></tr>
  
  
  <tr><td>Плательщик <font color="red">*</font>:</td><td><input id="fr51" type="radio" name="f5" value="Компания"> <label for="fr51">Компания</label><br /><input id="fr52" type="radio" name="f5" value="Частное лицо"> <label for="fr52">Частное лицо</label><br /></td></tr>
  
  <tr><td></td><td><div style="display:none;" id="text1">Юридическое название компании (согласно уставным документам):<br><input type="text" name="f6" size="30" style="width:95%;" maxlength="70"><br>Код ЕГРПОУ:<br><input type="text" name="f7" size="30" style="width:95%;" maxlength="70"></div> </td></tr>
  <tr><td></td><td><div style="display:none;" id="text2">ФИО плательщика:<input type="text" name="f8" size="30" style="width:95%;" maxlength="70"> </div></td></tr>
  
  
  <tr><td colspan="2" align="center"><br /><input type="submit" value="Отправить сообщение"></td></tr>
  </table>

• Нажать кнопку “Сохранить”

После внесения изменений советую вам скопировать шаблон формы, так как при любом перестраивании шаблона через систему uCoz все ваши индивидуальные настройки исчезнут.

Редактирование скрипта

Прежде всего нужно скопировать код для вызова почтовой формы, у меня это $MFORM_5$, и разместить его на странице где должна быть ваша форма. Далее скопируйте скрипт представленный ниже:

<script> 
//нужно задать переменные 
//переменные для input radio, сколько radio столько и переменных
var click1 = document.getElementById('fr51'); 
var click2 = document.getElementById('fr52'); 


//переменные для блоков информации, сколько блоков, столько и переменных
var radio1 = document.getElementById('text1'); 
var radio2 = document.getElementById('text2'); 

//функция добавления события onclick тегам input
function clicking (click) {
click.>
В скрипт внесите нужные изменения, а именно ваши id для тегов input и скрытых полей. После внесения всех изменений вставьте скрипт на страницу прямо под кодом вызова формы. 
 
И все работает. У меня остался только один сайт на uCoz, за которым я практически не слежу. На нем я и разместила пример, что все работает: Открыть пример