Changing drop-down field to text field.

[ehm]

I am working on creating an editable grid (for use in adding,
deleting, and editing rows back to an Oracle database). I have a JSP
that posts back to a servlet, which in turns posts to a WebLogic SFSB
and, from there, to the database.

On the front end, all cells appear as text fields. However, for
certain cells, when the user clicks on the cell, the text field turns
into a drop-down field (i.e. Select object), defaulting to the value
in the text field (unless the field is blank, in which case the
drop-down defaults to the first entry in the drop-down). Once the
user has selected a new entry, the drop-down then turns back into a
text field.

The problem that I am running into is that if the user simply clicks
on a blank field (which then turns into a drop-down), but does not
select anything (i.e. simply uses the default displayed entry), the
drop-down does not turn back into a text field. This causes problems
back in my servlet when I try to retrieve the value, since a text
field's value is actual text, whereas the select object's value is
something entirely different (in my case, I cannot make the displayed
text and value the same).

I have tried using "onBlur", "onClick", etc., but none of those seem
to work. Instead, I am using "onChange", which (obviously) only works
if the user has scrolled through the drop-down and selected a new
entry.

Any suggestions on how to make this work?

As an alternative solution, I have looked at changing all drop-down
fields to text fields once the user hits the "Save" button. I can
retrieve all drop-down fields by using the following:

document.getElementsByTagName("select");

I would like to then use the "innerHTML" logic to change the
drop-down to a text field. The "getElementsByTagName" retrieves the
appropriate cell, but using "innerHTML" on the retrieved object only
clears the drop-down entries, not the entire contents of the cell. Is
there some way that, given a field name, I can retrieve a cell's ID,
i.e. suppose I have the following:

<TD id="grid1Row1Col2"><INPUT CLASS="cell2D" type="text" size="40"
name="TypeTextField1" value="" onFocus="changeToDropDownGrid1(1, 2,
this, 'Type')></TD>

If I know the name "TypeTextField1", is there a way to navigate back
and get the ID of the cell ("grid1Row1Col2")?

Any help on either issue would be greatly appreciated. Thanks.

[Martin Honnen]

ehm wrote:

I am working on creating an editable grid (for use in adding,
deleting, and editing rows back to an Oracle database). I have a JSP
that posts back to a servlet, which in turns posts to a WebLogic SFSB
and, from there, to the database.

On the front end, all cells appear as text fields. However, for
certain cells, when the user clicks on the cell, the text field turns
into a drop-down field (i.e. Select object), defaulting to the value
in the text field (unless the field is blank, in which case the
drop-down defaults to the first entry in the drop-down). Once the
user has selected a new entry, the drop-down then turns back into a
text field.

The problem that I am running into is that if the user simply clicks
on a blank field (which then turns into a drop-down), but does not
select anything (i.e. simply uses the default displayed entry), the
drop-down does not turn back into a text field. This causes problems
back in my servlet when I try to retrieve the value, since a text
field's value is actual text, whereas the select object's value is
something entirely different (in my case, I cannot make the displayed
text and value the same).

I have tried using "onBlur", "onClick", etc., but none of those seem
to work. Instead, I am using "onChange", which (obviously) only works
if the user has scrolled through the drop-down and selected a new
entry.

Any suggestions on how to make this work?

As an alternative solution, I have looked at changing all drop-down
fields to text fields once the user hits the "Save" button. I can
retrieve all drop-down fields by using the following:

document.getElementsByTagName("select");

I would like to then use the "innerHTML" logic to change the
drop-down to a text field. The "getElementsByTagName" retrieves the
appropriate cell, but using "innerHTML" on the retrieved object only
clears the drop-down entries, not the entire contents of the cell. Is
there some way that, given a field name, I can retrieve a cell's ID,
i.e. suppose I have the following:

<TD id="grid1Row1Col2"><INPUT CLASS="cell2D" type="text" size="40"
name="TypeTextField1" value="" onFocus="changeToDropDownGrid1(1, 2,
this, 'Type')></TD>

If I know the name "TypeTextField1", is there a way to navigate back
and get the ID of the cell ("grid1Row1Col2")?

There is parentElement property in IE4+ and a parentNode property in
IE5+, Netscape 6+ and other W3C DOM compatible browsers. That property
allows "navigating back".

--

Martin Honnen
http://JavaScript.FAQTs.com/

[ehm]

Martin - thanks for the input. That solved one of my bigger problems.

Now, a follow-up question for you (or anyone else).

On my HTML page all cells appear as text fields. However, for
certain cells, when the user clicks on the cell, the text field turns
into a drop-down field (i.e. Select object), defaulting to the value
in the text field (unless the field is blank, in which case the
drop-down defaults to the first entry in the drop-down). Once the
user has selected a new entry, the drop-down then turns back into a
text field.

Some of the feedback that I have gotten is that once the user clicks
on the text field, not only should it change to a SELECT object (which
is currently working fine), but all drop-down elements should appear.
Currently, the user must click on one of these fields three times to
select a new entry: once to change the text field to a drop-down,
another time to display all drop-down options, and a third time to
select the new value. <sarcasm>Apparently, this is putting too much
strain on someone's index finger</sarcasm>, so I am trying to
eliminate one click. Ideally, if the user clicks on one of these text
fields, not only would the field change to a drop-down, but all
elements would be displayed (i.e. simulating the user has clicked the
field a second time).

I have tried to use the "click" method on this SELECT object, but no
luck (i.e. does not force the drop-down list to display). I also
tried the "fireEvent" method (passing in 'onClick'), but also no luck.
The only success I have had is using the "focus" method;
unfortunately, this only places the focus in the field and does not
automatically display all of the select options.

Any suggestions would be appreciated.