Question

I am using the following template to display data from the database. It is repeated and identical classes are used several times. I want to pass the value of the hidden field that is in that template on the onclick event of btnDelete.

<div class="Template">
    <div class="Title"></div>
    <div class="Price"></div>
    <div class="_Qty">Total Tickets:<div class="TotalQty"></div></div>
    <div class="_Qty1">Sold Tickets:<div class="UsedQty"></div></div>
    <div class="_Date">On Sale:<div class="StartDate"></div></div>
    <div class="_Date1">Sale Ends:<div class="EndDate"></div></div>
    <input type="hidden" value="8c991c10-7d88-4212-b931-5bfeff4ebcd0" />
    <input type="button" class="btnDelete" value="Remove Ticket" onclick="fnRemoveTicket(**THIS IS WHERE I NEED TO PASS HID VALUE**);"/>
    <input type="button" class="btnEdit" value="Edit Ticket"/>
</div>

I don’t know how to pass the value of the hidden field that is in the same parent as the button. Normally, I would select the button with some type of unique selector. Then do something like $(this).closest or $(this).parent. Since I have nothing unique about the button, I have to pass it inline with the onclick event, but I don’t know how to get this to work.

Answer 1

You can use prev or siblings method.

$('.btnDelete').click(function(){
     var val = $(this).prev().val();
     // var val = $(this).siblings("input[type='hidden']").val()
})