assign unique id to <input> button and read it using jquery

Question

I have a minor problem, basically I have a hidden input button which is loaded with a unique value from a database table: <input type="hidden" name="ProductId" class="ProductId" value='.$row["ProductId"].' /> This button gets repeated according to how many rows are returned through this method:

while ($row = $result->fetch()) {
    echo '<table class="cart-row" cellspacing="0" cellpadding="0" width="100%">';
    echo '<tbody>';
    echo '<tr>';
    echo '<td width="75"><img border="0" width="59px" height="78px" title="" alt="" src=' . $row["ImagePath"] .'></td>';
    echo '<td width="203"><span class="itemElements itemName">'. $row["Name"] .'</span></td>';
    echo '<td width="203"><input type="submit" class="btnMinus linkbtnType2" value="-"><input type="submit" class="btnPlus linkbtnType2" value="+"></td>';
    echo '<td width="135"><span class="qtyNum">('. $row["Qty"] .')</span> <br />';
    echo '<input type="hidden" name="ProductId" class="ProductId" value='.$row["ProductId"].' />';
    echo '<span class="qtyRemoveLink"><input type="submit" class="btnRemove linkbtn" value="Remove"></td>';                            
    echo '<td width="180"><span class="itemElements orderStatus">In Stock Usually dispatched within 24 hours</span></td>';
    echo '<td width="175" class="itemPriceRow"><span id="itemPrice">€ '. $row["Price"] .'</span></td>';
    echo '</tr>';
    echo '</tbody>';
    echo '</table>';
    echo '<br>';                            
}

Im using a jQuery method to use read this value from the hidden button however it is only reading the value from the first input button generated. I tried changing the the button from an ID to a class but with no luck.

This is the jQuery method:

$('.btnRemove').click(function() {
    var productId = $(".ProductId").val();
    $.ajax({
        type: "POST",
        url: "functions/deleteCartItem.php",
        data: "productId="+productId+ "",
        success: function(msg){   
            alert(msg);
        }
    })
})

A possible solution I can think of is to add a unique id to each button so they can be identified not only by name but also by id. However this poses a problem in reading it from the jQuery method.

Any ideas?

Andreas Louv · Accepted Answer · 2011-12-22 09:21:03Z

1

try :

var productId = $(this).closest('tr').find(".ProductId").val();

this referring to $('.btnRemove') as DOM element.

jQuery(this).closest("tr") we are traveling up the DOM tree searching for the first tr element.

From here we search for .ProductId.

Andreas

answered Dec 22, 2011 at 9:21

Andreas Louv

47.3k14 gold badges109 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Rory McCrossan · Accepted Answer · 2011-12-22 09:23:32Z

You are correct in your assumption that it is because you are referencing by class which is causing the problem. Your var productId = $(".ProductId").val(); will return an array of all the .ProductId elements, and val() will just return the value of the first of these.

To fix this you need to get the .ProductId element which is in the same container as the .btnRemove element which caused the click event, like this:

$('.btnRemove').click(function() {
    var productId = $(this).closest("td").find(".ProductId").val(); // amended selector
    $.ajax({
        type: "POST",
        url: "functions/deleteCartItem.php",
        data: "productId="+productId+ "",
        success: function(msg){   
            alert(msg);
        }
    })
})

dku.rajkumar · Accepted Answer · 2011-12-22 09:59:32Z

1

it will not return the correct value, try something like

var productId = $(this).parent().find(".ProductId").val();

or

var productId = $(this).parent().children(".ProductId").val();

or

var productId = $(this).prev(".ProductId").val();

or

var productId = $(this).siblings(".ProductId").val();

fiddle : http://jsfiddle.net/fwM3T/

edited Dec 22, 2011 at 9:59

answered Dec 22, 2011 at 9:25

dku.rajkumar

18.6k8 gold badges43 silver badges58 bronze badges

1 Comment

kapa Over a year ago

closest will only deal with parents, and instead of your second version, siblings is a better choice.

Curtis · Accepted Answer · 2011-12-22 10:58:33Z

0

You should try:

 var productId = $(this).closest('tr').find("input[name=ProductId]").val();

edited Dec 22, 2011 at 10:58

Curtis

104k69 gold badges280 silver badges359 bronze badges

answered Dec 22, 2011 at 9:24

Nicola Peluchetti

76.9k32 gold badges150 silver badges197 bronze badges

Collectives™ on Stack Overflow

assign unique id to <input> button and read it using jquery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related