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.

Vinay B R · Accepted Answer · 2010-09-01 18:20:48Z

4

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.

answered Sep 1, 2010 at 18:20

Vinay B R

8,4913 gold badges33 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Albert Over a year ago

i actually was using the OnClientClick, that was just a mistype when I was preparing this question. thanks for your post.

Brian Mains · Accepted Answer · 2010-09-01 18:18:43Z

2

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.

answered Sep 1, 2010 at 18:18

Brian Mains

50.8k35 gold badges155 silver badges260 bronze badges

6 Comments

asawyer Over a year ago

It's a compiler error though, the getElementById is not returning null... are you sure this is the problem?

KP. Over a year ago

@Brian there is no style property on a TextBox. He'd have to associate a css class.

Jay Over a year ago

I got a compile error when trying the problem too, but it was a different one. I would accept Vinay's answer though as going with OnClientClick seems to be the answer to this problem.

Albert Over a year ago

"@Brian there is no style property on a TextBox. He'd have to associate a css class." That's the main problem I was running into when trying to make this work..

Albert Over a year ago

ok so i was able to apply a style="display:none" tag to the textbox, which worked. And then my only issue (which i didn't include in my orig post) was the textbox1.ClientID reference wasn't working because the control was in a formview control. So I referenced it like: var theControl = document.getElementById("formview1$textbox1"); and theControl.style.display = "inline"; which worked!! Thanks for your help.

|

Collectives™ on Stack Overflow

Unhide ASP Textbox control in Javascript Function

2 Answers 2

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related