Lijo Lijo - 4 months ago 24
jQuery Question

jQuery to get Hidden Field Value in Table Row

I have a table with a hidden field in each row. I need to Alert the value of hidden field when a button in that row is clicked. I have the following jQuery code. But it does not work. How do we make it work?

CODE: http://jsfiddle.net/Lijo/xWanB/

<script>
$(document).ready(function () {

//"Show ID" for Associate Button Click
$('.resultGridTable tr > td > .actionButtonNational').click(function () {
//"this" means show ID button
//Traversing to get the parent row and then the required columns in the row
var associateID = $(this).parents('tr:first > .wrapperDivHidden input[type=hidden]').val();
alert(associateID);
return false;
});
});
</script>


HTML

<td>
XXXXX
<input type="submit" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$btnNational"
value="Show ID" id="detailContentPlaceholder_grdSubscribedAssociates_btnNational_2"
class="actionButtonNational" style="color: White; background-color: #A7A7A6;
font-weight: bold; width: 60px" />
<div id="wrapperDivHidden" class="wrapperDivHidden">
<input type="hidden" name="ctl00$detailContentPlaceholder$grdSubscribedAssociates$ctl04$hdnAssociateID"
id="detailContentPlaceholder_grdSubscribedAssociates_hdnAssociateID_2"value="789345680" />
</div>
</td>

Answer

your selector starts with tr:first > .wrapperDivHidden ... but .wrapperDivHidden is not an immediate child of tr so change your selector like so:

$(this).parents('tr').find('.wrapperDivHidden input[type="hidden"]').val();

Fiddle: http://jsfiddle.net/xWanB/3/