attribuer un identifiant unique à <input> et le lire en utilisant jquery

Question

J'ai un problème mineur, fondamentalement, j'ai un bouton d'entrée caché qui est chargé avec une valeur unique à partir d'une table de base de données: <input type="hidden" name="ProductId" class="ProductId" value='.$row["ProductId"].' /> Ce bouton se répète en fonction du nombre de lignes renvoyée par cette méthode:

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 en utilisant une méthode à utiliser jQuery lire cette valeur à partir du bouton caché mais il est en train de lire seulement la valeur de la première touche d'entrée générée. J'ai essayé de changer le bouton d'une identification à une classe mais sans chance.

Ceci est la méthode jQuery:

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

Une solution possible, je peux penser est d'ajouter un id unique à chaque bouton afin qu'ils puissent être identifiés non seulement par son nom, mais aussi par id. Cependant, cela pose un problème lors de la lecture de la méthode jQuery.

Des idées?

Answer 1

essayer:

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

this se référant à $('.btnRemove') comme élément DOM. Nous remontons l'arborescence DOM en cherchant le premier élément tr. Nous recherchons .ProductId.

Andreas

Answer 2

Vous avez raison dans votre hypothèse qu'il est parce que vous faites référence par classe qui est à l'origine du problème. Votre var productId = $(".ProductId").val(); retournera un tableau de tous les éléments .ProductId, et val() retournera simplement la valeur du premier d'entre eux.

Pour résoudre ce problème, vous devez obtenir l'élément .ProductId qui est dans le même conteneur que l'élément .btnRemove qui a provoqué l'événement click, comme ceci:

$('.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); 
     } 
    }) 
}) 

Answer 3

Vous devriez essayer:

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

Answer 4

il ne reviendra pas la valeur correcte, essayez quelque chose comme

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

ou

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

ou

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

ou

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

violon: http://jsfiddle.net/fwM3T/