[Javascript] Thoughts on building form elements/similar divs

[Paul Novitski]

At 03:45 PM 7/6/2005, Glenn E. Lanier, II wrote:
> > From: Paul Novitski
> > Sent: Wednesday, July 06, 2005 5:14 PM
>
> > - Mark up your document with eight input fields (type="text")
> > for the eight
> > locations, plus just one instance of the select list.
> >
> > - Begin with all eight input fields hidden and the select
> > list positioned
> > where the first input field would be if it were showing.
>
>Paul,
>
>I understand the concept, but how could I do this in Javascript?
>
>Starting with something like:
><div id="div1"><input type="text" id="text1"></div>
><div id="div2"><input type="text" id="text2"></div>
>
><div id="divSelect"><select id="selLargeList"></select></div>


Glenn,

As you know, we programmers are notoriously idiosyncratic, but here's how I 
would probably code this project:

- To make the javascript logic easier, I'd enclose all eight input fields 
in a single container:

         <div id="lists">
                 <input type="text" id="text1" />
                 <input type="text" id="text2" />
                 ...
         </div>
or:
         <ul id="lists">
                 <li><input type="text" id="text1" /></li>
                 <li><input type="text" id="text2" /></li>
                 ...
                 <li><input type="text" id="text8" /></li>
         </ul>


- On window.onload run an initialization function:

    - For each "input" tagName within container "lists":
       - Set style.visibility to hidden.
       - Set the onfocus function.
       - Perhaps record left & top coordinates in an array?

    - Store the total number of input fields inside "lists."  (Base this on 
how many are found, so you can change the number of fields in the HTML 
markup and not have to tweak the script.)

    - For "selLargeList" select field:
       - Set left & top equal to those of "text1"
       - Set onchange function.

    - Set a global variable as the current input field:
          var iCurrentField = 1;
      or possibly:
          var oCurrentField = document.getElementById("text1");
       (I like storing the integer better -- it's less code to generate the 
object name from the integer than to parse the integer from the object's id.)

- selLargeList onchange function:
    - Identify current input field.
    - Copy selected option value to current input field.
    - Make current input field visible.
    - Increment current field number
          (decide what happens after the last field)
    - Get left & top coordinates of new current field.
    - Position selLargeList at those coordinates.

- input fields' onfocus function:
    - Make the focus field the current field.
    - Set the selected option of selLargeList --> the input field value.
    - Set the input field's visibility to hidden.
    - Position selLargeList at the input field's coordinates.

Rattling off this metacode, I can see subroutines emerge where steps are 
repeated: hiding & showing input fields, positioning the select list, etc.

Rather than make empty input fields invisible, I'd prefer to show them 
dimmed (disabled).  That shows the user in a graphic way that multiple 
options are possible, reducing the need for prompts & help text.

Looks to me like two or three hours of coding & testing.

Paul