Jquery Hidden Field

Question

Why can't I get the value of this hidden field?

I have a control...

<asp:HiddenField ID="HiddenFieldServerDateTime" runat="server" /> 

Which renders as...

<input type="hidden" name="ctl00$cph_main$HiddenFieldServerDateTime" id="ctl00_cph_main_HiddenFieldServerDateTime" value="08/01/2010 10:54:11"  

Which I'm trying to get the value of using...

var serverDateTime = $("#HiddenFieldServerDateTime").attr('value'); 

So what's wrong?

I prefer this

var dateTime = $("[id$=_HiddenFieldServerDateTime]").val(); 

Answer 1

Because jQuery knows nothing about asp:HiddenField. It looks in the HTML structure where you have <input type="hidden" name="ctl00$cph_main$HiddenFieldServerDateTime" id="ctl00_cph_main_HiddenFieldServerDateTime" .... So there's no input with ID= HiddenFieldServerDateTime. There are a few ways to overcome this:

• Use a css selector:

  <asp:HiddenField ID="HiddenFieldServerDateTime"                   runat="server"                   CssClass="SomeStyle" /> 

  with the following selector: var serverDateTime = $(".SomeStyle").val();

  CssClass is not an available class on the HiddenField class (and it doesn't have an Attributes collection, so you can't add it manually).

• Use ClientID property:

  var serverDateTime = $("#<%= HiddenFieldServerDateTime.ClientID %>").val(); 

• Wrap the hidden field in something you can select:

  <div class="date-time-wrap">   <asp:HiddenField ID="..." runat="server" /> </div> 

   

  var serverDateTime = $('.date-time-wrap input[type=hidden]').val(); 

Answer 2

I know this has already been answered and resolved but here are two better (in my opinion) and simpler alternatives. If you are using .NET4 (or above) you can use ClientIDMode="Static" to force your ID to be used in the generated HTML:

<asp:HiddenField ID="HiddenFieldServerDateTime" runat="server" ClientIDMode="Static" /> 

which means you can do this in your JQuery:

var serverDateTime = $('#HiddenFieldServerDateTime').val(); 

or if you want to use the css class route then use a normal ASP:TextBox (which has a CssClass attribute) but just don't display it:

<asp:TextBox ID="HiddenFieldServerDateTime" runat="server" style="display:none" CssClass="MyStyle"></asp:TextBox> 

which allows you to do this:

var serverDateTime = $('.MyStyle').val(); 

Note that the css class you use doesn't have to be actually declared anywhere. You can just use it as a marker.