CODEWITHSUNDEEP
jqueryasp.nethiddenfield
Melanie
Melanie

Reputation: 584

Get the Value of an asp:HiddenField using jQuery

I have two pages. From the first page, I open a modal with a querystring that holds that value of a client name. I then use this to set a hiddenfield on the modal that opened.

I need a TextBox on the new modal to display the value that has been sent through from the first screen.

I've tried getting the value using:

var hv = $('hidClientField').val();`

But this doesn't seem to work.

This is my hidden field:

<asp:HiddenField ID="hidClientName" runat="server" />`

I set it in the code behind on the Page_Load like this:

hidClientName.Value = Request.QueryString["Client_Name"] ?? "";`

Any ideas will be much appreciated.

Upvotes: 29

Views: 65248

Answers (8)

AYK
AYK

Reputation: 1

Include ClientIDMode="Static" in your code.

var obj = $('#hidClientName').val(); <asp:HiddenField ID="hidClientName" ClientIDMode="Static" runat="server" />

Or

var obj = $('#<%=hidClientName.ClientID%>').val(); <asp:HiddenField ID="hidClientName" runat="server" />

Upvotes: 0

Glenn
Glenn

Reputation: 1975

Please try this code.

 var hv = $("#<%= hidClientField.ClientID %>").val();

Upvotes: 0

Ashfaq Shaikh
Ashfaq Shaikh

Reputation: 1668

you can do in this way

var hval = $('#<%= hdMarkupPercentage.ClientID%>').val();

Upvotes: 0

Amar Palsapure
Amar Palsapure

Reputation: 9680

Try any of the following

  1. If ASP.Net control and javascript both are on same page, then use

    var hv = $("#"+ '<%= hidClientField.ClientID %>').val();

  2. If you want to access the control from some JS file, then

    // 'id$' will cause jQuery to search control whose ID ends with 'hidClientField'
var hv = $('input[id$=hidClientField]').val();

  3. You can use class name selector to achieve same. Check out this similar question.

In asp.net, controls id is mangled. Because of this your code is not working.

Hope this works for you.

Upvotes: 56

Mujassir Nasir
Mujassir Nasir

Reputation: 1720

If you are using Asp.net controls, the server will mangle the control ids. It adds a bunch of extraneous control tree hierarchy information into the id. You need to reference what that acutal id is that's getting rendered, which is availble with the ClientID property on the control (hfUser.ClientID) or access your control in a different, more roundabout way, like find the controls parent, then search through its children to find your control.

If you don't have to use the asp.net HiddenField control, try just using a regular old html input.

Upvotes: 0

KV Prajapati
KV Prajapati

Reputation: 94645

Use ID selector.

var hv = $('#hidClientName').val();

Or

var hv = $('#<%=hidClientName.ClientID%>').val();

Upvotes: 6

Mujassir Nasir
Mujassir Nasir

Reputation: 1720

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

Upvotes: 4

Didier Ghys
Didier Ghys

Reputation: 30666

You forgot the # in your selector to select by ID:

var hv = $('#hidClientField').val();

Although asp.net generates ID based on the naming containers so you might end up with an ID like ctl1$hidClientField. You can then use the "attribute ends with" selector:

var hv = $('input[id$=hidClientField]').val();

Check the documentation about jQuery selectors

Upvotes: 7

Related Questions