[Javascript] Thoughts on building form elements/similar divs

[Mike Dougherty]

I'm wary of presenting a user with a moving target (the select box) and having to populate a text 
box with the contents of the selection then moving again to another place to click [possibly I'm 
not envisioning your proposed design]

What about using a single-valued drop-down select for category, and an select list (say 8 lines) 
showing the options in that category (to help manage a 2300 item list) Then have a "list mover" 
type control for putting the selected options into a second 'chosen items' select list.  This 
would help the user see their multiple-selection choices and manage multi-select in a (thanks to 
many existing OS/user app dialogs) more obvious way.

I also wonder if this application would be a good candidate for using xmlhttp calls to build the 
picklist as a result of the category select.  With some lazy cacheing, the page could be presented 
without the weight of the 2300 items, and build up those items (in the DOM) as they are requested. 
 The usual caveat of AJAX pages not having a definate URL is negligible because we're talking 
about the contents of an on-demand list box rather than page layout.  The javascript gets more 
complicated, and it would be helpful to understand the DOM - but an interface like that would be 
pretty slick.  (and if you had a publically available page, would make a nice technology showcase 
for your favorite "how to" site to link to)

ok, now i'm wildly off topic for the original question  :)

On Wed, 06 Jul 2005 17:12:06 -0700
  Paul Novitski <paul at novitskisoftware.com> wrote:
> 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 
> 
> _______________________________________________
> Javascript mailing list
> Javascript at LaTech.edu
> https://lists.LaTech.edu/mailman/listinfo/javascript
> 
> 
> 
> __________________________________________________________
> This message was scanned by ATX
> 8:12:36 PM ET - 7/6/2005