Changing drop-down field to text field.

Discussion in 'Javascript' started by ehm, Sep 19, 2003.

  1. ehm

    ehm Guest

    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.
    ehm, Sep 19, 2003
    #1
    1. Advertising

  2. 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/
    Martin Honnen, Sep 19, 2003
    #2
    1. Advertising

  3. ehm

    ehm Guest

    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.
    ehm, Sep 24, 2003
    #3
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. SirPoonga
    Replies:
    2
    Views:
    742
    Ben Strackany
    Jan 7, 2005
  2. weiwei
    Replies:
    0
    Views:
    1,001
    weiwei
    Jan 5, 2007
  3. msimmons
    Replies:
    0
    Views:
    458
    msimmons
    Jul 16, 2009
  4. Replies:
    5
    Views:
    253
  5. Replies:
    3
    Views:
    275
Loading...

Share This Page