Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Display textbox based on selection from dropdown list

  1. #1
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Display textbox based on selection from dropdown list

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    HTML Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    HTML Code:
    <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:

    Code:
    <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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  7. #7
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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:

    Code:
    <td colspan="2" height="5">
    not:

    Code:
    <td colspan=2 height=5>
    Code:
     . . . value="">
    not:

    Code:
     . . . value= >
    You have tons of these.

    Also, this is just plain wrong:

    Code:
    <select name=c1 size = 1<option value= >
    The opening select tag isn't closed, try:

    Code:
    <select name="c1" size="1"><option value="">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  9. #9
    Join Date
    Jul 2006
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  10. #10
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •