[Webinar] Streamline your web hosting managementRegister Today

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 315
  • Last Modified:

How to enable/disable textbox when dropdownlist is selected on ASP.NET

Hi Everyone,

I have 4 dropdownlists, each with an option "Other (Specify)".  I would like to make it so that when the "Other (Specify)" Option is selected, it will enable a textbox.  If something other than Other (Specify) is selected, i would like to disable the textbox.

I am working on ASP.NET via Visual web express developer and am having a very hard time finding anything on google that would help me with this.

As an example, here's the code for one of my drop down list and textbox:

 <asp:DropDownList ID="ddl1" runat="server" Width="262px" >
                        <asp:ListItem Value="Chequing"></asp:ListItem>
                        <asp:ListItem Value="Day to Day Expenses"></asp:ListItem>
                        <asp:ListItem Value="Other (Specify)"></asp:ListItem>
                    </asp:DropDownList><br />

<asp:TextBox ID="tbother" runat="server" BackColor="Transparent" MaxLength="50" Style="background-color: lightgrey"
                        Width="254px" BorderStyle="Inset"></asp:TextBox></td>

Can someone please provide a pseudocode for me?

Really appreciate your help!

Thanks!
0
sarah_siu
Asked:
sarah_siu
  • 3
  • 3
2 Solutions
 
leakim971PluritechnicianCommented:
put the following in head section :

<script>
window.onload = function() {
     document.getElementById("<%= ddl1.ClientID %>").onchange = function() {
            if( this.value == 'Other (Specify)' ) {
                document.getElementById("<%= tbother.ClientID %>").setAttribute("disabled", "disabled");
            }
            else {
                document.getElementById("<%= tbother.ClientID %>").removeAttribute("disabled");
            }
     }
}
</script>

Open in new window

0
 
sarah_siuAuthor Commented:
Thank you for the quick response.  I pasted it in the head section but i am still able to access the textbox for any value i select from ddl1.

Do i need to call  this function in my code?  Or it should work as soon as i put it in?

and do i need to put <script type = "javascript">?

Here is what i've done:


 
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
    


<script>
window.onload = function() {
     document.getElementById("<%= ddl1.ClientID %>").onchange = function() {
            if( this.value == 'Other (Specify)' ) {
                document.getElementById("<%= tbother.ClientID %>").setAttribute("disabled", "disabled");
            }
            else {
                document.getElementById("<%= tbother.ClientID %>").removeAttribute("disabled");
            }
     }
}
</script>




  
</head>


<body onload="init()">
    <form id="form1" runat="server">
    <div>
        <table style="width: 688px; font-family: arial; height: 113px; font-size: 10pt;">
            <tr>
                <td colspan="2" style="height: 48px">
                        <b style="mso-bidi-font-weight: normal"><span style="font-size: 10pt"><span style="font-family: Verdana; border-bottom-color: #660000;">
                            <p class="MsoNormal" style="margin: 0in 0in 0pt">
                                <b style="mso-bidi-font-weight: normal"><span style="font-size: 10pt">
                            Capture Intended Use of Account for Authorized Product 
                            Open through the ICBS Contingency Process<?xml
                                        namespace="" ns="urn:schemas-microsoft-com:office:office" prefix="o" ?><o:p></o:p></span></b></p>
                        </span></span></b>
                </td>
                <td style="width: 234px; height: 48px; text-align: right;">
                    &nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    <img src="logo.JPG" style="width: 200px; height: 48.9px; text-align: right;" /></td>
            </tr>
            <tr>
                <td bordercolor="#660033" colspan="3" style="height: 1px; background-color: #660000;">
                </td>
            </tr>
            <tr>
                <td style="width: 480px; height: 34px;" bordercolor="#660033">
                    <strong>
                    Date:</strong></td>
                <td style="width: 296px; height: 34px;" bordercolor="#660033">
                    <asp:Label ID="lbldate" runat="server" Width="166px" ForeColor="Black"></asp:Label></td>
                <td style="width: 234px; height: 34px;" bordercolor="#660033">
                    <asp:Label ID="lblerror1" runat="server" Font-Bold="True" ForeColor="#FF0033" Width="257px"></asp:Label></td>
            </tr>
            <tr>
                <td style="width: 480px; height: 46px">
                    <strong>
                    CIF:</strong></td>
                <td style="width: 296px; height: 46px">
                    000&nbsp;
                    <asp:TextBox ID="tbcif" runat="server" ToolTip="Enter only the 7 digits after the leading zeroes" MaxLength="7" BorderStyle="Inset"></asp:TextBox></td>
                <td style="width: 234px; height: 46px">
                    <span style="font-size: 10pt"></span></td>
            </tr>
            <tr>
                <td style="width: 480px; height: 45px">
                    <strong>Account:</strong></td>
                <td style="width: 296px; height: 45px">
                    00&nbsp; &nbsp;<asp:TextBox ID="tbaccount" runat="server" ToolTip="Enter only the 8 digits after the leading zeroes" MaxLength="8" BorderStyle="Inset"></asp:TextBox></td>
                <td style="width: 234px; height: 45px">
                    <span style="font-size: 10pt"></span></td>
            </tr>
            <tr>
                <td style="width: 480px; height: 39px; vertical-align: top">
                    <strong>
                    Select the Type of Account:</strong></td>
                <td style="width: 296px; height: 39px">
                    <asp:RadioButtonList ID="rbl1" runat="server" Height="139px" Width="239px">
                        <asp:ListItem Value="Cheque" >Chequing:</asp:ListItem>
                        <asp:ListItem Value="Savings">Savings (IPSA or IFSA):</asp:ListItem>
                        <asp:ListItem Value="PLC">PLC (Low Cost Borrowing Account):</asp:ListItem>
                        <asp:ListItem Value="SBA">SBA (Secured Borrowing Account):</asp:ListItem>
                    </asp:RadioButtonList></td>
                <td style="width: 234px; height: 39px">
                    <asp:DropDownList ID="ddl1" runat="server" Width="262px" >
                        <asp:ListItem Value="Chequing"></asp:ListItem>
                        <asp:ListItem Value="Day to Day Expenses"></asp:ListItem>
                        <asp:ListItem Value="Other (Specify)"></asp:ListItem>
                    </asp:DropDownList><br />
                    <br />
                    <asp:DropDownList ID="ddl2" runat="server" Width="263px">
                        <asp:ListItem Value="Savings (IPSA or IFSA)"></asp:ListItem>
                        <asp:ListItem Value="Education"></asp:ListItem>
                        <asp:ListItem Value="House or Property"></asp:ListItem>
                        <asp:ListItem Value="Vehicle"></asp:ListItem>
                        <asp:ListItem Value="Vacation"></asp:ListItem>
                        <asp:ListItem Value="General Savings"></asp:ListItem>
                        <asp:ListItem Value="Other (Specify)"></asp:ListItem>
                    </asp:DropDownList><br />
                    <br />
                    <asp:DropDownList ID="ddl3" runat="server" Width="263px">
                        <asp:ListItem Value="PLC "></asp:ListItem>
                        <asp:ListItem Value="Debt Consolidationg or Payout"></asp:ListItem>
                        <asp:ListItem Value="Vehicle Purchase"></asp:ListItem>
                        <asp:ListItem Value="Investments"></asp:ListItem>
                        <asp:ListItem Value="Home Improvements"></asp:ListItem>
                        <asp:ListItem Value="Real Estate Purchase"></asp:ListItem>
                        <asp:ListItem Value="Education"></asp:ListItem>
                        <asp:ListItem Value="Vacation"></asp:ListItem>
                        <asp:ListItem Value="Other (Specify)"></asp:ListItem>
                    </asp:DropDownList><br />
                    <br />
                    <asp:DropDownList ID="ddl4" runat="server">
                        <asp:ListItem Value="SBA"></asp:ListItem>
                        <asp:ListItem Value="Purchase - Primary Residence"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Debt Consolidation or Payout"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Vehicle Purchase"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Investments"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Home Improvements"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Real Estate Purchase"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Education"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Vacation"></asp:ListItem>
                        <asp:ListItem Value="Refinance - Other (Specify)"></asp:ListItem>
                    </asp:DropDownList><br />
                </td>
            </tr>
            
            <tr>
                <td style="vertical-align: top; width: 480px; height: 39px">
                </td>
                <td style="width: 296px; height: 39px">
                    <span style="color: #990000"><em>If Other is selected in dropdown, please specify:</em></span></td>
                <td style="width: 234px; height: 39px">
                    <asp:TextBox ID="tbother" runat="server" BackColor="Transparent" MaxLength="50" Style="background-color: lightgrey"
                        Width="254px" BorderStyle="Inset"></asp:TextBox></td>
            </tr>
            
            <tr>
                <td style="vertical-align: top; width: 480px; height: 39px">
                </td>
                <td style="width: 296px; height: 39px">
                    <asp:Button ID="btnsubmit" runat="server" Height="21px" Text="Submit" Width="113px" />
                    &nbsp;&nbsp;
                    <asp:Button ID="btnexit" runat="server" Height="21px" Text="Exit" Width="114px" /></td>
                <td style="width: 234px; height: 39px">
                </td>
            </tr>
        </table>
    
    </div>
    </form>
</body>
</html>

Open in new window

0
 
Jesus RodriguezIT ManagerCommented:
If you're working with asp.net why don't you use the method of the Dropdown?? _SelectedIndexChanged()
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 
sarah_siuAuthor Commented:
you mean in the aspx.vb section?  if you mean that, i've tried but didn't work..
0
 
Jesus RodriguezIT ManagerCommented:
On the Method SelectedIndexChanged() of the Dropdown write this code

If ddl1.SelectedValue="Other (Specify)" then
  tbother.Enable=False
EndIf
0
 
Jesus RodriguezIT ManagerCommented:
Check if the Property AutoPostBack is set to true on the DropDown control ??
0
 
sarah_siuAuthor Commented:
Awesome - it worked.  Thank you!
0

Featured Post

The new generation of project management tools

With monday.com’s project management tool, you can see what everyone on your team is working in a single glance. Its intuitive dashboards are customizable, so you can create systems that work for you.

  • 3
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now