Access an asp:hiddenfield control in JavaScript

Question

What is the best way to access an ASP.NET HiddenField control that is embedded in an ASP.NET PlaceHolder control through JavaScript? The Visible attribute is set to false in the initial page load and can changed via an AJAX callback.

Here is my current source code:

<script language="javascript" type="text/javascript">
    function AccessMyHiddenField()
    {
        var HiddenValue = document.getElementById("<%= MyHiddenField.ClientID %>").value;

        //do my thing thing.....
    }
</script>
<asp:PlaceHolder ID="MyPlaceHolder" runat="server" Visible="false">
    <asp:HiddenField ID="MyHiddenField" runat="server" />
</asp:PlaceHolder>

EDIT: How do I set the style for a div tag in the ascx code behind in C#? This is the description from the code behind: CssStyleCollection HtmlControl.Style

UPDATE: I replaced the asp:hiddenfield with an asp:label and I am getting an "undefined" when I display the HiddenValue variable in a alert box. How would I resolve this.

UPDATE 2: I went ahead and refactored the code, I replaced the hidden field control with a text box control and set the style to "display: none;". I also removed the JavaScript function (it was used by a CustomValidator control) and replaced it with a RequiredFieldValidator control.

Answer 1

If the Visibility is set to false server-side, the placeholder won't be rendered and you won't be able to access anything inside it from JavaScript. Your code should work when the placeholder is visible="true"

Get rid of the placeholder, leave the hidden field empty at first, after the search populate it.

Answer 2

My understanding is if you set controls.Visible = false during initial page load, it doesn't get rendered in the client response. My suggestion to solve your problem is

1. Don't use placeholder, judging from the scenario, you don't really need a placeholder, unless you need to dynamically add controls on the server side. Use div, without runat=server. You can always controls the visiblity of that div using css.

2. If you need to add controls dynamically later, use placeholder, but don't set visible = false. Placeholder won't have any display anyway, Set the visibility of that placeholder using css. Here's how to do it programmactically :

   placeholderId.Attributes["style"] = "display:none";

Anyway, as other have stated, your problems occurs because once you set control.visible = false, it doesn't get rendered in the client response.

Answer 3

If the place holder visibility is set to false, it will never be rendered , and the hidden field value will be only stored in the ViewState of the page.

just one question, why are you setting the visibility of the place holder to be false , if its containing a hidden field?

Anyway one possible way to get over this issue, is adding a TextBox or Label object , and set the display CSS style of it to "none" , then in your code copy whatever you are putting in the hidden field into the textbox/lable text property, this way you can easily read the value using javascript , since the textbox/label will be rendered but not visible to others, though this might not be that safe thing to do.

Answer 4

Visible doesn't actually make it visible, you can leave it default. Just runat="server" and use its .Value.

Answer 5

Instead of making ".visible=false", change the style to "display: none;". That will render your control but make it invisible.