I have a table data which is generated dynamically via a loop. The td contains a hidden field. below is the code for the same:

<td class="gridtd" id = "r<%=RowNumber%>c<%=ColumnNumber%>">
<input id="hiddendata" type="hidden" value="<%: item.Key%>"/>
</td>

I have a table data which is generated dynamically via a loop. The td contains a hidden field. below is the code for the same:

<td class="gridtd" id = "r<%=RowNumber%>c<%=ColumnNumber%>">
<input id="hiddendata" type="hidden" value="<%: item.Key%>"/>
</td>

I need to extract the value of the hidden field based on the td selected using jQuery. Please help me get the correct jquery code.

• javascript
• jquery
• html
• css
• asp-mvc-4

Share Improve this question Follow edited Oct 17, 2014 at 6:32 Ionică Bizău 114k9494 gold badges308308 silver badges487487 bronze badges asked Oct 17, 2014 at 6:24 Debashis PaulDebashis Paul 2722 gold badges22 silver badges66 bronze badges 6

• 3 $('#hiddendata').val(); – Regent Commented Oct 17, 2014 at 6:25
• But there are multiple hiddendata as the loop is creating multiple td. So how will jQuery know which is the correct hidden id corresponding to the td selected. – Debashis Paul Commented Oct 17, 2014 at 6:29
• 2 For adequate elements' selecting their IDs must be unique. It is a bad style to use multiple same IDs. But in this situation you can use Ionică Bizău, P5Coder and user3168736 answers. – Regent Commented Oct 17, 2014 at 6:30
• what if my hidden field id is also a variable to the effect of id=hdnr<%=RowNumber%>c<%=ColumnNumber%> How will I then be able to get the value of the hidden field? – Debashis Paul Commented Oct 17, 2014 at 6:56
• Then you can either select element by its ID or use, for example, mentioned $('.gridtd').click(function() { console.log($(this).find('input[type=hidden]').val()); }); – Regent Commented Oct 17, 2014 at 7:00

 |  Show 1 more ment

6 Answers 6

Sorted by: Reset to default 2

Just select your input and take the value (val()):

$("#hiddendata").val();

If you want to take all hidden input values:

$("input[type='hidden']").each(function () {
   console.log($(this).val());
});

Note that the element ids must be unique.

I need to extract the value of the hidden field based on the td selected using jQuery.

If by select you mean, click, you can simply pass this when getting the value:

$("td").on("click", function () {
   console.log(
     $("[type='hidden']", this).val()
   );
});

For your general knowledge, if you do $("#hiddendata", this).val(); inside of the click handler, it will return the correct value (even having multiple ids with the same value).

But definitely, the ids must be unique.

Use this :

  $('#hiddendata').val();

$('td').click(
    function(event)
    {
      $(event.target).find('#hiddendata').val();
    }
);

It ll give the hiddendata value based on td selection

This will give the value of the hidden field for the selected td.

$('.gridtd').click(function(){
    console.log($(this).find('input').val());
});

$('.gridtd').click(function(){
    console.log($(this).find('input[type=hidden]').val());
});

You can try this:

$('.gridtd').each(function(){
    var currentId = $(this).attr('id');
    var hiddenval = $('#'+currentId).find('input[type=hidden]').val();
    alert(hiddenval);
})