asked on

use javascript to make a textbox visible on DDL selection

I'm using Visual studio 2013. I have a regulare .aspx web forms page.

So on my page i have a asp DropDownList and a ASP Textbox.

This is my code:

TestPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DDL_ASP_EnableDisableTextBox1.aspx.cs" Inherits="Wizards2.DDL_ASP_EnableDisableTextBox1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title> Make TextBox Visible on DDL Selection</title>

    <script type="text/javascript">

        // disable textbox by default
        //Textbox1.disabled = true;
        document.getElementById('TextBox1').style.visibility = 'hidden';

        function Enable() {

            document.getElementById('TextBox1').style.visibility = 'visible';
            //document.getElementById("TextBox1").disabled = false;

        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:DropDownList ID="DropDown_Fruit" runat="server" AutoPostBack="True" onchange="Enable();">
            <asp:ListItem>Apple</asp:ListItem>
            <asp:ListItem>Banana</asp:ListItem>
            <asp:ListItem>Pear</asp:ListItem>
            <asp:ListItem>Watermelon</asp:ListItem>
        </asp:DropDownList>
        <br /><br /><br /><br />                  
        <asp:TextBox runat="server" ID="TextBox1" />       

    </div>
    </form>
</body>
</html>

Open in new window

This is what I want:

When the page launches I want TextBox1 to be hidden.
Then if I select any item from the Drop Down List then I want the textbox to become visible.

Where am I making a mistake in my code above?

Big Monty

since your DDL is a server control, when the page is loaded, it's ID is not Textbox1. you can verify this via doing a view source.

what you want to do is something like:

    <script type="text/javascript">

        // disable textbox by default
        //Textbox1.disabled = true;
        document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'hidden';

        function Enable() {

            document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'visible';
            //document.getElementById("<%=TextBox1.ClientID %>").disabled = false;

        }
    </script>

Open in new window

you should also move the script down towards the end of the doc, right before the closing </body> tag, to make sure the DOM has fully loaded

maqskywalker

ASKER

Per your suggestion I revised my code. This is my code now... Almost there.

TestPage.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="TestPage.aspx.cs" Inherits="Wizards2.TestPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Make TextBox Visible on DDL selection</title>

    <script type="text/javascript">

        function MakeHidden() {
            // hide textbox
            // asp textbox
            document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'hidden';
            // html textbox
            //document.getElementById('TextBox1').style.visibility = 'hidden';
        }

        function MakeVisible() {
            // make textbox visible
            // asp textbox
            document.getElementById('<%=TextBox1.ClientID %>').style.visibility = 'visible';
            // html textbox
            //document.getElementById('TextBox1').style.visibility = 'visible';
        }
         
    </script>

</head>

<!--calls this function on page load-->
<body onload="MakeHidden()">

    <form id="form1" runat="server">

    <div>
        <asp:DropDownList ID="DropDown_Fruit" runat="server" AutoPostBack="True" onchange="MakeVisible()">
            <asp:ListItem>Apple</asp:ListItem>
            <asp:ListItem>Banana</asp:ListItem>
            <asp:ListItem>Pear</asp:ListItem>
            <asp:ListItem>Watermelon</asp:ListItem>
        </asp:DropDownList>
        <br /><br /><br /><br />                  
        <asp:TextBox runat="server" ID="TextBox1" />       
    </div>

    </form>
</body>
</html>

Open in new window

When I run this page now, the textbox is hidden on load which is exactly what I want.
But when I select any item from the dropdownlist the textbox is visible for like less than 1 second and it disappears.

This is a video of me running my page. You can see what I'm talking about.
http://youtu.be/Wbq1b6bBBd4

Any ideas of why the textbox appears for like half a second and then disappears? It should not disappear. After I make a selection it should appear and stay there on the screen.

ASKER CERTIFIED SOLUTION

Big Monty

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial