We hide, show, duplicate fields of form

Agreements

Concept

We hide and show fields

Sometimes it's necessary to fill two various parts of the questionnaire, depending on a choice made on radio-buttons. If both of them are located in one document, user get lost in widgets (and spoil exterior view). If to locate them in two documents, than logic of work of DBMS becomes complicated (update, timeout). I offer to control appearance of tags group on page.

We surround group by special tag multi. Radio-button (we shall name it further also as control button), which display group, if chosen (checked), specify a name of tag multi in own attribute press.

Thus, code should look so in case "you are student - you are worker":

<table>
 <tr>
  <th rowspan="2"> you are: </th>
  <td> <input press="stud" type="radio name=x"> student </td>
 </tr>
 <tr>
  <td> <input press="work" type="radio name=x"> worker </td>
 </tr>

 <multi name="stud">
 <tr>
  <th> parents surname </th>
  <td> <input type="text" name="family"> </td>
 </tr>
 <tr>
  <th> home phone </th>
  <td> <input type="text" name="phone"> </td>
 </tr>
 </multi>

 <multi name="work">
 <tr>
  <th> profession </th>
  <td> <input type="text" name="profession"> </td>
 </tr>
 <tr>
  <th> date of graduating </th>
  <td> <input type="text" name="graduating"> </td>
 </tr>
 <tr>
  <th> length of service </th>
  <td> <input type="text" name="experience"> </td>
 </tr>
 </multi>

</table>

While all radio-button is not chosen, user sees the following

Having chosen "student", user see in window

and having chosen "worker":

If user choose "student" and filling such:

then browser sends following text

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

If user choose "worker" and filling fields as

than browser sends

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

All fields of form can be filled - but not all can be sent. Switching to another group of fields don't erase values, entered earlier. Tags multi can be enclosed.

Selective tag appearance

Duplication of fields

We meet such items, as enumeration of previous work places. Much frequently (if not always) some identical cells, for example widgets <input type=text name=Ai>, are allocated in page for this list (list of uncertain length beforehand). Cells, as a rule, is not enough (it's necessary to send new pages for user), or they remain empty (and spoil exterior view). Author of this article saves information, earlier informed by a user, in hidden-variable <input type=hidden> of new page, and then commits (writes down) both input-hidden, and input-text in database at once. Chains of such pages are possible, thus each next page contains information, entered in all previous. Even if name of all files in a chain are same, browser correctly reacts to the button "back", correctly distinguishing documents. However, I think, you agree, what to send the same page from one end of a planet in another only for adding hidden-variable is unreasonable.

It would be desirable, that additional html-structures appear on pressing any button "else". It's necessary to collect several tags in group, i.e. to surround by special tag (let it will multi). Button (we shall name it further as control button), which duplicate group of tag, specify a name of tag multi in own attribute press. So, for the case

code should look so

<table>
 <tr>
  <th> acceptance date </th>
  <th> sacking date </th>
  <th> organization name </th>
  <th> sacking reason </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>

and user see the following after three botton pressing

If user filling form as

than browser sends (browser will fill such form on another site automatically by substituting data depending on number of tag 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">

If user does not press button "else", then browser sends

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

If tag multi is absent

<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">

User presses button "back" of browser for reduction quantity of fields after duplications of them. It's possible to emphasize several rows of duplicated fields and cut/copy into clipboard, and than to insert into several rows (i.e. as in Excel).

Interaction

Let user has duplicated some tag, which is inside of tag of radio-button, and then he has switched a radio-button into other value and then back into previous value. Then he will see tag for duplication in a single copy.

Nesting of tags multi

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

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

Placing tag multi, which surrounds any widgets, inside another tag multi, which directly does not surround any widgets, make such result, that additional XML-tag appears in sending XML-text in some level of hierarchy.

Resume

html60author