Velocity Reviews - Computer Hardware Reviews

Velocity Reviews > Newsgroups > Programming > Javascript > Changing drop-down field to text field.

Reply
Thread Tools

Changing drop-down field to text field.

 
 
ehm
Guest
Posts: n/a
 
      09-19-2003
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.
 
Reply With Quote
 
 
 
 
Martin Honnen
Guest
Posts: n/a
 
      09-19-2003


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/

 
Reply With Quote
 
 
 
 
ehm
Guest
Posts: n/a
 
      09-24-2003
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.
 
Reply With Quote
 
 
 
Reply

Thread Tools

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off


Similar Threads
Thread Thread Starter Forum Replies Last Post
javascript validation for a not required field, field is onlyrequired if another field has a value jr Javascript 3 07-08-2010 10:33 AM
1.Enter space bar for field names and save the field.The field shoud not get saved and an alert should be there as"Space bars are not allowed" Sound Javascript 2 09-28-2006 02:43 PM
Placing the selection of a list field in a text field Jerry Manner HTML 5 06-09-2005 01:52 PM
writing from hidden field to text field repost Roy Adams Javascript 3 12-21-2004 02:32 PM
writing from hidden field to text field Roy Adams Javascript 1 12-20-2004 03:47 AM



Advertisments