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

This will work as well by using jQuery to select all IDs that end with _HiddenFieldServerDateTime.

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

Answer 2

<input type="hidden" ID="HiddenFieldServerDateTime" runat="server" class="HiddenFieldServerDateTime" />

Answer 3

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.

Answer 4

I just ran into a similar issue and my answer was to make a new control which inherits from HiddenField and gives it a CssClass property:

public class HiddenFieldWithClass : HiddenField
{
    [CssClassProperty]
    [DefaultValue("")]
    public virtual string CssClass 
    {
        get
        {
            string Value = this.ViewState["CssClass"] as string;
            if (Value == null)
                Value = "";
            return Value;
        }
        set
        {
            this.ViewState["CssClass"] = value;
        }
    }

    protected override void Render(HtmlTextWriter writer)
    {
        if (this.CssClass != "")
        {
            writer.AddAttribute(HtmlTextWriterAttribute.Class, this.CssClass);
        }
        base.Render(writer);
    }
}

I am now able to assign a class to my hidden fields and use the class value to find the correct field on the client side.

Might also be worth noting that in my case the hidden fields are being created dynamically in code behind, the above may need some enhancments to be usable in the designer.

Hope this helps someone else along the way.

Answer 5

Add a class attribute ".myHiddenValue" to the tag then use

var myVal = $(".myHiddenValue").val()

or since this will render after loading the document my advise use this

$(document).ready(function(){
   var myVal = $("input[name='ctl00$cph_main$HiddenFieldServerDateTime']").val();
 }
);

Note: also applies for the first example as well

Answer 6

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();