Client Side javascript call from ASP control doesn't reset visibility

Question

I have a javascript to enable text boxes when called, I want to trigger this code when a user picks value "Custom" from a dropdownlist, so that I can display/Hide these new textboxes.

function setVisibility(DropDownListID) {
    var element = document.getElementById(DropDownListID);
    var element1 = document.getElementById("TestBox1");
    if (element.value == "Custom") {
        element1.visible = !element1.visible ;
    } 

<asp:DropDownList ID="DateRangeDropDownList" runat="server" Enabled="True" onChange="setVisibility('DateRangeDropDownList');">
                     <asp:ListItem>Some Value</asp:ListItem>
                        <asp:ListItem>Custom</asp:ListItem>
                    </asp:DropDownList>

<asp:TextBox ID="TestBox1" runat="server"></asp:TextBox>

For some reason it doesn't seem to work. Any ideas?

Answer 1

Because ASP.NET render's your control's is different than you specify in your function call. Use control's ClientID property to get rendered id attribute for a server side control. Here I put dropdown itself as a parameter, and access to your textbox by it's ClientID :

function setVisibility(yourDropdown) {
var element1 = document.getElementById(<%= TestBox1.ClientID %>);
if (yourDropdown.value == "Custom") {
    element1.visible = !element1.visible ;
} 

<asp:DropDownList ID="DateRangeDropDownList" runat="server" Enabled="True" 
    onChange="setVisibility(this);">
         <asp:ListItem>Some Value</asp:ListItem>
         <asp:ListItem>Custom</asp:ListItem>
</asp:DropDownList>
<asp:TextBox ID="TestBox1" runat="server"></asp:TextBox>