Text box

cdenequolo · December 2nd, 2003, 10:18 AM

How can I hide a text box on a form and have it pop up or appear based on a choice in a drop down box?

jacob · December 2nd, 2003, 10:41 AM

You can use the style sheet property display, and then make a java script function to toggle this property between none and block.

I have made this small example for you. Paste all code to a page and view the page.

Code:

<HTML>
<HEAD>

<SCRIPT language=JavaScript>
function toggle(theID)
{    
    var field01;
    field01 = document.getElementById(theID);        
    if(field01 != null)
        field01.style.display = (field01.style.display == "block")? "none" : "block";
}
</SCRIPT>

</HEAD>
<BODY>
<FORM>

<CENTER>
<TABLE BORDER='0' CELLSPACING='4'>
<TR ID='tobehidden' STYLE='display:block;'>
    <TD CLASS='label'>your name</TD>
    <TD CLASS='control'><INPUT type='text'></TD>
</TR>
<TR>
    <TD CLASS='label'>
        <select CLASS='drop' onchange="toggle('tobehidden'); return false;" >
            <option>option 01</option>
            <option>option 02</option>
        </select>
    </TD>
    <TD CLASS='control'><INPUT TYPE='button' value='next' onclick="toggle('tobehidden'); return false;"></TD>
</TR>
</TABLE>
</CENTER>
</FORM>
</BODY>
</HTML>

This will give you an idea how to do it! Do not mind the CLASS attributes. I didn't include the style sheet.

Hope it helps!

Jacob.

cdenequolo · December 2nd, 2003, 11:28 AM

Thanks what you gave me works I'm just not sure how to incorporate it in my form. What I have is a form with 4 dropdown boxes that collect data from the user. The last box has an option called "other" when the user chooses this option I need text area to pop up so the user can enter the description or comment. Can you help with this?

Thanks
Chuck

jacob · December 2nd, 2003, 11:56 AM

Well, here it goes...

Code:

<HTML>
<HEAD>

<STYLE>
BODY        { background-color:#FFFFFF; font-family:verdana; }
.label        { text-align:right; vertical-align:top; }
.control     { text-align:left; vertical-align:top; }
.styling    { border-style:solid; border-color:#666666; border-width:1px; font:bold; }
</STYLE>
<SCRIPT language=JavaScript>
function toggle(theID)
{    
    var field01;
    field01 = document.getElementById(theID);        
    if(field01 != null)
         field01.style.display = (document.forms[0].choice.value == "show")? "block" : "none";
}
</SCRIPT>
</HEAD>

<BODY>

<FORM>
<TABLE BORDER='0' CELLSPACING='4'>
<TR>
    <TD CLASS='label' WIDTH='200'>textarea</TD>
    <TD CLASS='control'>
        <select CLASS='styling' onchange="toggle('tobehidden'); return false;" name="choice">
            <option value="not">something</option>
            <option value="show">other</option>
        </select>
    </TD>
</TR>
<TR ID='tobehidden' STYLE='display:none;'>
    <TD CLASS='label' WIDTH='200'>some data</TD>
    <TD CLASS='control'><TEXTAREA CLASS='styling'></TEXTAREA></TD>
</TR>
<TR>
    <TD CLASS='label' WIDTH='200'></TD>
    <TD CLASS='control'><INPUT CLASS='styling' type='submit' value='submit'></TD>
</TR>
</TABLE>
</FORM>

</BODY>
</HTML>

Try this. I included some style, since I do not like the default ;) !

Jacob.

cdenequolo · December 2nd, 2003, 12:21 PM

Thanks this seems to be working great.