jquery只提交第一個元素

Question

我試圖存儲產品ID，但它只存儲第一個元素。

$(document).ready(function() { 
    $("#driver").live('click', function(event){ 
    var product = $("#product").val(); 
    $("#stage").load('add-exec.php', {"product":product}); 
    }); 
}); 

和這裏的列表

<?php 

    $sql="SELECT * FROM products ORDER BY name ASC"; 
    $query=mysql_query($sql); 

    while ($row=mysql_fetch_array($query)) { 

?> 
<tr> 
    <td><?php echo $row['name'] ?></td> 
    <td><?php echo $row['description'] ?></td> 
    <td><?php echo $row['price'] ?>$</td> 
    <td> 
    <input type="hidden" id="product" value="<?php echo $row['id_product'] ;?>" /><br /> 
    <div id="stage"></div> 
    <input type="button" id="driver" value="Add" /> 
</tr> 
<?php 

    } 

?> 

Answer 1

就像說ID必須是唯一的。用類代替多個元素。切換到該解決方案：

// change id into class 
<input type="hidden" class="product" value="<?php echo $row['id_product'] ;?>" />  <br /> 
<div id="stage"></div> 
// i added btnAdd class 
<input type="button" class="driver btnAdd" value="Add" /> 

和JS應該是：

$(document).ready(function() { 
    // attach click event on btnAdd class 
    $(".btnAdd").live('click', function(event){ 
     // get product value using selector .prevAll(must be siblings) 
     // and filter by it class 
     var product = $(this).prevAll('.product').val(); 
     $("#stage").load('add-exec.php', {"product":product}); 
    }); 
});