How to set the value of asp:HiddenField using jQuery and get the value at ASP.Net code behind

If you come to this page looking out for a quick answer for “How to set the value of asp:HiddenField using jQuery and get it in code behind”, here is the answer. But I recommend you to read through the rest of the article to know why we are doing what we are doing.

Aspx page:

We are referencing the jQuery library in the first line. We are updating the value of ‘value’ attribute of input hidden element, just before submission of form.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<script type="text/javascript">
  $(document).ready( function() {
    $( '#<% =btnSubmit.ClientID %>').click(function (e) {
      $('#<% =hdnField.ClientID %>').attr('value', '1234');
    });
  }
);
</script>

<asp:HiddenField ID="hdnField" runat="server" Value=""  />
<asp:Button ID="btnSubmit" runat="server" Text="Submit" OnClick="btnSubmit_Click" />

Aspx code behind

protected void btnSubmit_Click(object sender, EventArgs e)
{
       string hdnValue  = hdnField.Value;
}

Longer version with explanation:

This question is composed of two parts. Let’s split it up and solve them separately

• Setting the value of asp:HiddenField using jQuery
• Get the value at ASP.Net code behind

Setting the value of asp:HiddenField using jQuery:

To set the value of asp:HiddenField using jQuery, we need to do the below steps

1. Find the generated html element of asp:HiddenField so that we can know what to change to set the value
2. Select the generated html element so that we can set the value of that element
3. Set the value
4. You should know when to set this value. Place your code which sets the value of asp:HiddenField, as per your requirement

Let us discuss why and how to do the above mentioned steps

1. Find the generated html element of asp:HiddenField so that we can know what to change to set the value

asp:HiddenField is a server side ASP.Net control whereas jQuery, a javascript library, resides at client side at the browser. jQuery or any client side component(including javascript,HTML,CSS) does not have any knowledge of your server side ASP.Net control. Look at the below picture how these components live at different ends. So, to set the value of asp:HiddenField using jQuery, you need to know the generated html element of asp:HiddenField. The html element generated when using asp:HiddenField is input type=”hidden”

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

If you use asp:HiddenField control like above, the generated html element would be like below

<input type="hidden" name="hdnField" id="hdnField" />

 

We need to add/update the value of ‘value’ attribute in the above hidden input element so that it would like below. In the below example, we have set the value of “1234”

ToBe:

<input type="hidden" name="hdnField" id="hdnField" value=”1234” />

This is the change that we want to do in jQuery.

 2. Identify that particular element as there could be multiple elements of the same type:

There may be multiple asp:Hidden controls (and generated input type=”hidden” html elements ) in the same form. You can use the id element to uniquely identify an element in a page – as no two elements can exist with same id in a valid HTML.

Below jQuery expression can be used to uniquely identify the html element and there are few things worth explaining about the same.

$('#<% =hdnField.ClientID %>')

$ is a jQuery function – When you pass a string starting with #, jQuery assumes that you are passing the id to identify the element (the id is the string followed by #).

We need to pass the id of the asp:HiddenField control to this $ function. But the id of generated html input element does not need to have the same id that you give in aspx page, especially when you are using master pages. So, it is safer to use ClientID property of ASP.Net server control to get the id – which would give correct id of the generated html.

Consider the following asp:HiddenField ASP.Net server Control. The id is given as hdnField.

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

But the id of this control may not be hdnField in the generated html.

Character # is prepended to the id of the element to inform jQuery that we are passing id to identify the element. $(‘#<% =hdnField.ClientID %>’)

Now we have selected the element.

3. Set/Update the value of ‘value’ attribute of hidden element

We are calling jQuery attr function on the element to set the attribute value. We can set the attribute value of any element using this function. The first parameter is the name of the attribute and second parameter is the value. We are setting the value ‘1234’ to ‘value’ attribute.

$('#<% =hdnField.ClientID %>').attr('value', '1234');

4. When to set the value

You should set this value based on your business requirement at the time when you want it. If you are going to set some static value, you could set this value as soon as the document gets loaded. If you want to set this value based on some entered value or behavior from the user, you can set this value just before user submits the form.

In the below code, we are setting this value when user clicks submit button. We are selecting the submit button and writing the client side click event handler for the same.

$( '#<% =btnSubmit.ClientID %>').click(function (e) {
  $('#<% =hdnField.ClientID %>').attr('value', '1234');
});

It is safer to write our any event handler when the document is ready to be manipulated- as all the html elements would be available at this time. jQuery has below function for the same .

$(document).ready(function() {});

Finally wrap this event handler when the document is ready to be manipulated

<script type="text/javascript">
$(document).ready( function() {
  $( '#<% =btnSubmit.ClientID %>').click(function (e) {
    $('#<% =hdnField.ClientID %>').attr('value', '1234');
  });
});
</script>

• Get the value at ASP.Net code behind

Values of all the form elements are submitted to the server including the hidden input elements. They are not just visible to the user. Of course, user can see this by clicking view source in their browser.

You can access the value by accessing the Value property of hidden element like below.

protected void btnSubmit_Click(object sender, EventArgs e)
{
     string hdnValue  = hdnField.Value;
}

Thanks for reading this article. I am writing a book titled ‘Faster ASP.Net Web Form Apps using jQuery’. Please signup in the below form so that I can send goodies along with other updates.