Question

I´m trying to build a shopping cart in jQuery and PHP but cannot read values from form list.
When trying to get value from the form that is submitted i only get values from
the first form in the list view.

Please look at behaviour here:
http://www.adlertz.se/index.php?op=prodlist&katID=9&sidemenu=menushop

Click buy on ex. the middle, you get value from first.

Please help me with this, i have benn looking for solution for three days.
Probably a simple problem but i cant find the answer anywhere 😐 !!!.

Many thanks in advance!

     function prodlist(){
$katID = $_GET['katID'];

$sql = mysql_query("SELECT * FROM shop_prod WHERE kategoriID=$katID");

while ($rad=mysql_fetch_array($sql)) {
    echo "<div class=\"shop_prod_list\">";
        echo "<div class=\"shop_prod_list_tmb\"><img src=\"shop/images/prod_images_tmb/".$rad['prodID'].".png\" alt=\"\"></div>";

        echo "<form id=\"addcartform\" class=\"addcartform\" method=\"post\">";
        echo "<input type=\"hidden\" name=\"prodID\" id=\"prodID\" value=\"".$rad['prodID']."\" />";
        echo "<input type=\"submit\" class=\"shop_prod_list_kundvagn\" value=\"\" id=\"addcart\"/>";
        echo "</form>";

    echo "</div>";
}
echo "<div id=\"search_results\"></div>";

}

  $(document).ready(function(){ 

$(".addcartform").click(function(e){ 
    e.preventDefault(); 
    addcart(); 
}); 

});

   function addcart(){ 

var prodID=(this).document.getElementById('prodID').value; <-(Reads value but only the first)

$.post("functions/cart.php", {prodID : prodID}, function(data){
    if (data.length>0){ 
        $("#search_results").show();    
        $("#search_results").html(data);
    } 
}) 

}

   <?php
  include "db_config.php";
  include "db_connect.php";

$prodID = strip_tags(substr($_POST['prodID'],0, 100));
$prodID = mysql_escape_string($prodID);

echo $prodID ." is added.";

?>

Answer 1

Use class instead of id

echo "<input type=\"hidden\" name=\"prodID\" class=\"prodID\" value=\"".$rad['prodID']."\" />";

Send the element which was clicked to your function

$(".addcartform").click(function(e){ 
    e.preventDefault(); 
    addcart(this); //this line
}); 

Then use that element to find the input with your class

function addcart(element){ 

    var prodID = $(element).find('.prodID').val();  //Get val of clicked item

    $.post("functions/cart.php", {prodID : prodID}, function(data){
        if (data.length>0){ 
            $("#search_results").show();    
            $("#search_results").html(data);
        } 
}) 

---

Although i would use only one button, without a form like this.

Php:

echo "<button name='prodID' class='shop_prod_list_kundvagn addcart' data-prodid='".$rad['prodID']."' value='Add' />";

Javascript:

$(".addcart").click(function(e){ 
    e.preventDefault(); 
    var prodID = $(this).data('prodid');

    $.post("functions/cart.php", {prodID : prodID}, function(data){
        if (data.length>0){ 
            $("#search_results").show();    
            $("#search_results").html(data);
        } 
    });
});