ASP.NET control with visible=false cannot be used in javascript?

Question

I have an ASP.NET text control "FromDate" whose visible property is set to false, but I wanted a client side javascript to be able to toggle the visibility property using CSS properties

element1.style.display = "none"; // hides the element
element1.style.display = ""; // shows the element

but when I attempt to get the textbox, I get null on

  var element1 = document.getElementById("FromDate");

When I try the same code with visble=true as the default on the "FromDate" ASP.NET control, it works (although that is not the behavior I need)

Any ideas?

Answer 1

When you set Visible = false to a control, it is not rendered. That means there is no HTML representation of that control sent to the page. Set the style only.

You can set the style as display: none from server side code like this:

FromDate.Style.Add(HtmlTextWriterStyle.Display, "none")

Answer 2

Instead of setting Visible=false, set its style.display to none, that way the element is still there for JavaScript to manipulate.

Answer 3

If you want to hide this control, you can try CSS like this:

<asp:somecontrol id="FromDate" style="display:none" />

I think CSS is easily and more understandable.