Unhide ASP Textbox control in Javascript Function

Question

I have the following control:

<asp:TextBox ID="textbox1" runat="server" Width="95px" MaxLength="6" />

which i would like to be hidden/invisible on page load, and have the textbox appear after clicking a button/running some javascript without reloading the page.

Here's my current button:

<asp:Button ID="cmdShowBox" runat="server" Text="Show Button" onclick="showBox(); return false"  />

and lastly here's my current javascript function:

                function showBox() {
                var theControl = document.getElementById("<%= textbox1.ClientID %>");
                theControl.style.display = "none";


                }

I was starting with just showing the box on load, then trying to click a button to make it hide, but I can't even get that to work :( When I run the code as it is above I get a server error which says

Compiler Error Message: BC30451: Name 'textbox1' is not declared.

Thanks for any help/advice.

Answer 1

Hey,

If you are setting the server-side visible property to false, this doesn't render the control at all on the client. That's also why you can get the textbox1 error message. Instead do:

<asp:TextBox id="textbox1" ... style="display:none" />

And then this element is rendered, but hidden. Then this should work.

function showBox() {
    var theControl = document.getElementById("<%= textbox1.ClientID %>");
    theControl.style.display = "";
}

To show it.

Answer 2

onclick on a button is bound to a server side method. use a normal html button or Use OnClientClick on the asp:button. also setting visible false on the textbox on the server will not even rencer the control in the first place trying hiding it by setting a css with display none.