Display textbox based on selection from dropdown list

[stevema4567]

I am new to this. Please help!
How do I display a textbox only if a certain value is selected from a dropdown list within a form?
I have the following code which is pulling values fro a sql database. If the selected item = Enter/Edit/Delete Beyond 60 days then I need to display a text box for the user to type in a reason.

<tr class=formlabel><td colspan=2 height=<%=spacerheight%>></td></tr>

<%

Category_name = rstemp2("Category_name")
Category_number = rstemp2("Category_number")
Category_index = rstemp2("Category_index")

%>
<tr><td align=right width=<%=widthpercent%> class=formlabel>

<%
response.write Category_name & ":</td><td align=left class=formboxholder>"
response.write "<select name=c" & rstemp2("category_number") & " size = 1>"
response.write "<option value= >Ignore</option>"

Do While rstemp2.EOF <> True
'-->AKS<-- Added CINT functions to match both sides of <>.
if CInt(rstemp2("Category_number")) <> CInt(Category_number) THEN
response.write "</select></td>"
response.write "</tr>"
Response.write "<td align=right class=formlabel>"
Response.write rstemp2("Category_Name") & ":</td><td align=left class=formboxholder>" & chr(10)
response.write "<select name=c" & rstemp2("category_number") & " size = 1>" & chr(10)
response.write "<option value= >Ignore</option>"
Category_number = rstemp2("Category_number")
End If

' Checked if this option is already select for this case
If CaseNumber <> "" Then
'-->AKS<-- Added CInt function to match both sides of =
If CInt(rstemp("C" & Category_number)) = CInt(rstemp2("item_number")) Then
response.write "<option SELECTED value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
Else
response.write "<option value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
End IF
End If ' End of case_number <> ""

If CaseNumber = "" Then
response.write "<option value=" & rstemp2("item_number") & ">" & rstemp2("item_name") & "</option>" & chr(10) & chr(13)
End If
rstemp2.MoveNext
Loop
response.write "</select></td></tr></table></center>"
End IF


rstemp2.close
set rstemp2=nothing

' If Not new case then close the other record set
If Case_Number <> "" Then
rstemp.close ' close the original record set
set rstemp=nothing
End IF


conntemp.close ' Close the connection
set conntemp=nothing

%>

</td></tr>

[jscheuer1]

That looks almost certainly to be VBscript/ASP programming, definitely not javascript. There is an ASP forum here but you might have better luck at another forum (codingforums.com has a much larger base of ASP and VBscript participants, for example). Javascript could be used in conjunction with your code but, unless it was run server side as the code you currently have is, it wouldn't be able to be relied upon if the user were to have javascript disabled.

[stevema4567]

Many thanks for the reply. It is VBscript/ASP programming, I will post at codingforums.com too. I'm not worried about javascript being disabled.

[jscheuer1]

Here is one example of how this can be done in javascript (client side):

<form action="">
<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<input style="visibility:hidden;" type="text" name="box">
</form>

The result in non-javascript enabled browsers would be that the textbox would never be seen. With a bit more code it could be worked out that non-javascript browsers would always see the textbox.

[stevema4567]

Thanks for the quick response. I have your code working great for me, however instead of using a static list, I need it to dynamicly pull the options from a sql database. Any ideas on how to do that and still perform the select onchange?

[jscheuer1]

OK, well the selectedIndex doesn't rely upon the populated values or text displayed by the select element. The selectedIndex is simply a number that refers to which item is selected. To make this a bit clearer, we could have this:

<form action="">
<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">
<option value="">Bob</option>
<option value="">Henri</option>
<option value="">Martin</option>
<option value="">Jessica</option>
</select>
<input style="visibility:hidden;" type="text" name="box">
</form>

and it would still work. Selecting 'Martin' would reveal the text input. I used the numbers in my example just to show the selectedIndex of each option. Each will have that selectedIndex no matter what it displays and no matter what its value attribute is set to.

If you need to populate and set which selectedIndex reveals the box, you will need to populate this number (red) as well as the options themselves:

<select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'};">

The selectedIndex is always numbered from 0 to whatever on down the list of available options.

[stevema4567]

Thanks again for your help. I think that I understand that. I'm having trouble putting it into action with the code that I initially posted above. That code above when ran generates the following HTML code:
<center>

<table class=innnerformwrapper width="97%" cellspacing=0 cellpadding=0>
<tr class=formlabel><td colspan=2 height=5></td></tr>
<tr><td colspan=2 class=minorformtitle height="1%">Select the best category choices below:</td></tr>
<tr class=formlabel><td colspan=2 height=5></td></tr>


<tr><td align=right width=40% class=formlabel>

Problem Type:</td><td align=left class=formboxholder><select name=c1 size = 1<option value= >Ignore</option><option value=1>Problem</option>

<option value=2>Question</option>

<option value=3>Request</option>

<option value=4>Comment</option>

<option value=5>Other</option>

</select></td></tr><td align=right class=formlabel>Resource:</td><td align=left class=formboxholder>
<select name=c2 size = 1>
<option value= >Ignore</option><option value=1>Forgot Password</option>

<option value=2>Account Locked Out</option>

<option value=3>Enter/Edit/Delete Beyond 60 days</option>

<option value=4>Add NP Contract</option>

<option value=5>Non-Normal Hours Access</option>

<option value=6>Application Issues</option>

<option value=7>Reports Issues</option>

<option value=8>Computer Hardware</option>

<option value=9>Other Equipment</option>

</select></td></tr></table></center>

Every time I put the "onchange" in at the select I get an expected end of statement error. Any ideas?

[jscheuer1]

First thing I notice and it might be the problem - I can't tell because you don't show your onchange event and how that falls exactly into the above - is that attributes in HTML must be quoted to be valid. Browsers will usually let you slide on this. But, if they get confused as to where the quotes should have been, you have problems. The onchange event is both an attribute of sorts and an event, so it is doubly important that its value be quoted. I'd try making sure all of this is taken care of then see if the problem persists.

Examples:

<td colspan="2" height="5">

not:

<td colspan=2 height=5>

 . . . value="">

not:

 . . . value= >

You have tons of these.

Also, this is just plain wrong:

<select name=c1 size = 1<option value= >

The opening select tag isn't closed, try:

<select name="c1" size="1"><option value="">

[stevema4567]

I think that you missed my point. I'm running the code that I originally posted and from that code if I do a View/Source I see the HTML code that I posted and you say it needs to be quoted.

If putting quotes in the original code is what I need to do, I can't figure out where to put them. If I was writing the HTML code straight out it would be no problem to insert the quotes that you're talking about, but I have been furnished this other code to use.

I don't show the onchange event, because if I the "onchange" in at the select I get an expected end of statement error and no code to show you.

[jscheuer1]

Well then, rewrite your server side code so that it produces valid HTML and javascript source, if you are still having problems, get back to us.

Just because your code is generated server side doesn't mean it can generate invalid code and still work. The principals are the same, no matter how the code is written. Browsers will give you quite a bit of leeway but, once they can no longer understand what you meant to write (or meant to have be written by the server), they will give errors.

The moral to this story is to write (or have written) valid code. Then, when problems arise (which is much less likely with valid code), they will be easy to spot.

With invalid code, it isn't always just one straw that breaks the camel's back but, often a cascading effect of errors. With valid code, it's usually just one thing.