Accessing ASP control methods/properties/attributes in Javascript ??

Question

Using Javascript in IE6 with ASPNET.2.0. I need to change the ENABLE or VISIBLE property of an ASP:TextBox called 'tbDate' in the Javascript. Can this be done - if so how ??

Tried the following but doesn't work.

document.getElementById('<%=tbDate.ClientID%>').setAttribute("Visible", "False")

Any help or links would be much appreciated.

Answer 1

You won't be able to change the Visible property as it's a server side attribute that isn't rendered as part of the control. Controls that are not visible don't render any HTML so there isn't any way to use client-side scripting to find them. What you could do is set the enabled or readonly property via Javascript.

Answer 2

Your code is almost correct. There is not "visible" property of course. Use display:none.

document.getElementById('<%=tbDate.ClientID%>').style.display = 'none';

Answer 3

As a bit of background, when you set the Visible attribute on an ASP.NET server control (or a HTML server control) in code-behind or in the aspx markup, that control is not rendered in the HTML sent to the client and therefore it cannot be accessed because it does not exist on the client.

If you want to have a hidden element which you then want to make visible using client-side code (i.e. without doing a postback), then you can set the style display to none or use a CSS class with display: none. This will still render the control in the HTML but the control will not be visible. You can then make the control visible and hide it using (respectively)

// to make visible
document.getElementById("<%= tbDate.ClientID %>").style.display = "block";

// to hide it
document.getElementById("<%= tbDate.ClientID %>").style.display = "none";