Select from Combo Box Displays Text Box 1

[woohahee]

Ok I have a combo box on my page which displays a number of options. Within the combo box I have an "Other (Please Specify)" Option - now when this happens I would like a text box to appear next to the combo to allow the user to specify what the other is.

The code so far:

<TR><TD>Colour:</TD><TD>
<select NAME=&quot;Colour&quot;>
<option VALUE=&quot;White&quot; <% if rs(&quot;Colour&quot = &quot;White&quot; then response.write &quot; SELECTED&quot;%>>White</OPTION>
....
<option VALUE=&quot;Other&quot;<% if rs(&quot;Colour&quot = &quot;Other&quot; then response.write &quot; SELECTED&quot;%>>Other (Please Specify)</OPTION>
</select>
<INPUT ID=XtraColour NAME=XtraColour VALUE='<%= rs(&quot;XtraColour&quot %>'>
</TD></TR>

Now I appeciate that I need to add an onChange=&quot;Function()&quot;
but I can't get it to work!

Please Help!

Richard

 

[harmmeijer]

You should have posted this in javascript or vbscript forum but here is an answer anyway.

<script>
function fncDisplayOther(objSelect) {
if(objSelect.value.toLowerCase()==&quot;other&quot{
document.getElementById('divOther').innerHTML = &quot;<input type=text name='txtOther'>&quot;;
}else{
document.getElementById('divOther').innerHTML = &quot;&quot;;

}
}
</script>

<select NAME=&quot;Colour&quot; onChange='fncDisplayOther(this);'>
<option VALUE=&quot;White&quot;>White</OPTION>
<option VALUE=&quot;Other&quot;>Other (Please Specify)</OPTION>
</select>
<div id='divOther'></div>

 

[Gorkem]

Ok.. in order to do this, you need to use some DHTML and javascript.. Before I go into the code.. I'll give you some background on how this works..

You first want to design the page with all the elements you want (including ones that will appear later). Once thats done, you want to set a style to HIDE the elements you don't want shown at first.. Then you use javascript to either show it or hide it again.

Now for the code (the bolded parts are what I have added to your code):


<script language=&quot;javascript&quot;>

function checkOther(obj)
{

if (obj.value == 'Other') {
// Shows the OTHER textbox if Other IS selected.
XtraColourID.style.display = &quot;inline&quot;;
} else {
// Hides the OTHER textbox if Other is not selected
XtraColourID.style.display = &quot;none&quot;;
}

}

</script>


<TR><TD>Colour:</TD><TD>
<select NAME=&quot;Colour&quot; onchange=&quot;javascript: checkOther(this);&quot;>
<option VALUE=&quot;White&quot; <% if rs(&quot;Colour&quot = &quot;White&quot; then response.write &quot; SELECTED&quot;%>>White</OPTION>
....
<option VALUE=&quot;Other&quot;<% if rs(&quot;Colour&quot = &quot;Other&quot; then response.write &quot; SELECTED&quot;%>>Other (Please Specify)</OPTION>
</select>
<INPUT ID=XtraColourID NAME=XtraColour VALUE='<%= rs(&quot;XtraColour&quot %>' style=&quot;display: none;&quot;>
</TD></TR>



Hope this has helped.

Cheers,

Gorkem.