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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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/

Method 2

Try this:

<script type="text/javascript">

    $(document).ready(function () {
        //"Show ID" for Associate Button Click
        $('.actionButtonNational').click(function () {
            var associateID = $('input[type=hidden]', $(this).closest("td")).val();
            alert(associateID);
            return false;
        });
    });
</script>

Method 3

Here is an over simplified example of what you are trying to do:

http://jsfiddle.net/6S5rD/

Method 4

if the first column of your row is hidden then use this
var x = $(‘input[type=hidden]’, $(this).find(“td:first”)).val();

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0