Прячем, показываем, размножаем поля формы

Соглашения

Концепция

Прячем и показываем поля

Бывают случаи, когда, в зависимости от выбора, сделанного на radio-кнопках (кругленькие такие, с черными пятнышками внутри), необходимо заполнять две совершенно различные части анкеты. Если их расположить обе в одном документе, то пользователь теряется в виджетах (да и портится внешний вид). Если расположить в двух документов, то усложняется логика работы СУБД (update, timeout). Предлагаю управлять появлением группы тегов на странице.

Обрамим группу специальным тегом multi, а у radio-кнопки, которая, будучи выбранной (checked), отобразит на экране связанные с собой теги (в дальнейшем также будем называть ее контрольной кнопкой), в атрибуте press укажем имя тега multi).

Итак, для случая "you are student - you are worker" код должен выглядеть так:

<table>
 <tr>
  <th rowspan="2"> вы являетесь: </th>
  <td> <input press="stud" type="radio name=x"> студентом </td>
 </tr>
 <tr>
  <td> <input press="work" type="radio name=x"> рабочим </td>
 </tr>

 <multi name="stud">
 <tr>
  <th> фамилия родителей </th>
  <td> <input type="text" name="family"> </td>
 </tr>
 <tr>
  <th> домашний телефон </th>
  <td> <input type="text" name="phone"> </td>
 </tr>
 </multi>

 <multi name="work">
 <tr>
  <th> специальность </th>
  <td> <input type="text" name="profession"> </td>
 </tr>
 <tr>
  <th> дата окончания </th>
  <td> <input type="text" name="graduating"> </td>
 </tr>
 <tr>
  <th> стаж по специальности </th>
  <td> <input type="text" name="experience"> </td>
 </tr>
 </multi>

</table>

Пока в radio-кнопках кружочек не установлен (ни одна позиция не выбрана) пользователь видит следующее

Выбрав "student", пользователь увидит в окне

а выбрав "worker" - следующее

Если пользователь выберет "student" и заполнит форму как указано ниже:

тогда браузер отправит следующий текст

<stud family="Tomson" phone="1234567">

Если пользователь выберет "worker" и заполнит поля следующим образом

то браузер отправит

<work profession="chemist" graduating="1900" experience="10">

Поля формы могут быть заполнены все - но не все отправлены. Переключение на другую группу полей не стирает значения, введенные ранее. Теги multi могут быть вложенными.

Выборочное появление тегов

Размножаем поля

Мы встречаем такие пункты, как перечисление предыдущих мест работы. Очень часто (если не всегда) под перечень (заранее неопределенной длины) отводится на странице несколько одинаковых ячеек, например, виджетов <input type=text name=Ai> которых, как правило, либо не хватает (приходится присылать пользователю новые страницы), либо они остаются пустыми (и портят внешний вид). Автор этой статьи хранит ранее сообщенную пользователем информацию в hidden-переменных <input type=hidden> новой страницы, а затем commit-ит (записывает) и input-hidden, и input-text в базе за один раз. Возможны цепочки таких страниц, при этом каждая последующая страница содержит всю информацию, введенную пользователем на предыдущих. Даже если название всех файлов в цепочке одно и то же, проверено, браузер правильно реагирует на кнопку "back" (назад), безошибочно различая документы. Однако, я думаю, вы согласитесь, что гонять одну и ту же страницу из одного конца света в другой только ради того, чтобы внести hidden-переменные неразумно.

Хотелось бы, чтобы по нажатию некоторой кнопки "еще" появлялись дополнительные html-структуры. Несколько тегов нужно собрать в группу, т.е. обрамить специальным тегом (пусть это будет multi). У кнопки, которая размножает группу тегов (в дальнейшем будем называть ее контрольной кнопкой), в атрибуте press укажем имя тега multi. Итак, для случая

код должен выглядеть так

<table>
 <tr>
  <th> дата приема </th>
  <th> дата увольнения </th>
  <th> название организации </th>
  <th> причина ухода </th>
 </tr>

 <multi name="workplace">
 <tr>
  <td> <input type="text" name="in_date"> </td>
  <td> <input type="text" name="out_date"> </td>
  <td> <input type="text" name="ltd"> </td>
  <td> <input type="text" name="why"> </td>
 </tr>
 </multi>

 <tr>
  <td colspan="4"><input press="workplace" type="button" value="else"></td>
 </tr>
</table>

причем после трехкратного нажатия на кнопку пользователь должен видеть следующее

Если пользователь заполнит поля следующим образом

то браузер отправит (на другом сайте браузер заполнит такую форму автоматически, подставляя данные на основе номера тега WORKPLACE)

<workplace in_date="01.90" out_date="01.91" ltd="AAA" why="aaa">
<workplace in_date="01.92" out_date="01.93" ltd="BBB" why="bbb">
<workplace in_date="01.94" out_date="01.95" ltd="CCC" why="ccc">
<workplace in_date="01.96" out_date="01.97" ltd="DDD" why="ddd">

Если пользователь не нажмет на кнопку "else" ни разу, то браузер отправит

<workplace in_date="01.90" out_date="01.91" ltd="AAA" why="aaa">

Если тег multi отсутствует

<table>
 <tr>
  <td> <input type="text" name="in_date"> </td>
  <td> <input type="text" name="out_date"> </td>
  <td> <input type="text" name="ltd"> </td>
  <td> <input type="text" name="why"> </td>
 </tr>
</table>

<in_date  text="01.90">
<out_date text="01.91">
<ltd      text="AAA">
<why      text="aaa">

Для уменьшения количества полей после их размножения пользователь нажимает кнопку "back" браузера. Можно выделить несколько строк размноженных полей и вырезать/копировать в буфер обмена, а затем вставить в несколько строк (т.е. как в Excel).

Взаимодействие

Пусть пользователь размножил некоторый тег, находившийся внутри тега radio-кнопки, а затем переключил radio-кнопку на другое значение и затем назад на прежнее значение. Тогда он увидит размножаемый тег в единственном экземпляре.

Вложенность тегов multi

<multi name="work">
  ...
  <multi name="workplace">
  ...
  </multi>
</multi>

<work ...>
<workplace ...>
</work>

Вложение внутрь тега multi, который непосредственно не обрамляет никакие виджеты, другого тега multi (который обрамляет), приводит к тому, что в отправляемом XML-тексте на некотором уровне иерархии появится дополнительный тег.

Резюме

html60author