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

score 59 · Accepted Answer · edited Jul 23 '10 at 21:42

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

score 21 · Answer 2 · answered Feb 16 '12 at 10:35

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.

I like the textbox option. The ClientIDMode=Static seems risky to me, but then I spend a lot of time building controls which need to play nice when there are multiple instances of them. — Rozwel, Apr 11 '12 at 17:12
ClientIDMode works great for a single control, but not so well in a repeater since they'll all get the same ID. — bperniciaro, Jul 19 '14 at 05:19

score 10 · Answer 3 · answered Jan 06 '12 at 16:36

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.

score 7 · Answer 4 · edited Oct 17 '13 at 14:56

7

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

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

edited Oct 17 '13 at 14:56

ajcw

23,604
6
30
47

answered Apr 12 '11 at 03:04

score 4 · Answer 5 · answered Mar 16 '11 at 19:06

4

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

answered Mar 16 '11 at 19:06

Matthew O'Leary

41
1

score 1 · Answer 6 · answered Jan 08 '10 at 11:26

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

Jquery Hidden Field

6 Answers6

Linked