Ajax Call gibt nur letzte ID

Question

Ich versuche, eine Add-in-Cart-Funktion über Ajax zu entwickeln, das Problem ist, dass egal welches Produkt ich in den Warenkorb hinzufügen, fügt es das letzte Element auf der Liste und dann inkrementiert das gleiche Produkt auf Klicken Sie auf ein anderes Produkt. Hier ist mein Code: -

<?php   
    $i = 1; 
    while($row = mysqli_fetch_array($run_products)){ 
    $op_id = $row['option_id']; 

    echo "<tr>"; 
    echo "<td>" . $i . "</td>"; 
    echo "<td>" . $row['option_desc'] . "</td>";  
    echo "<td> 

    <form action='' method='post' class='p_form'> 
     <input type='text' name='product_id' value='$op_id' pid='$op_id'> 
     <input type='text' name='quantity' value='1' pid='$op_id'> 
     <input class='btn btn-primary add' type='submit' name='add_to_cart' value='Add to Cart' id='product' pid='$op_id'> 
    </form> 
    </td>"; 
    echo "</tr>";   
    $i++; 
} 
?> 

Hier ist jquery:

<script type="text/javascript"> 

$(document).ready(function(){ 

    $(document).on('click','.p_form',function (event) {  
     event.preventDefault(); 

     var element = $(this); 
     var id = element.attr("pid"); 
     //alert(id); 

       $.ajax({ 

        url: 'action.php', 
        method: 'post', 
        //data: {id:id}, 
        data:$('.p_form').serialize(), 
        success: function(data){ 

         $('#message').html(data);       
        } 
       }); 

     return false; 

    }); 

}); 
</script> 

hier action.php ist, der $ product_id immer wieder als 4 (zum Beispiel), wenn die letzte ID in den letzten 4

if (!empty($_POST)){ 
    $product_id = $_POST['product_id']; 
    echo $product_id; 
} 

Answer 1

Need es wie unten zu tun: -

<script type="text/javascript"> 

$(document).ready(function(){ 
    $(document).on('click','.add',function (event) {//instead of form click add event on form button click  
     event.preventDefault(); 
     var element = $(this); 
     var id = element.attr("pid"); 
     //alert(id); 

      $.ajax({ 
       url: 'action.php', 
       method: 'post', 
       data:element.parent('.p_form').serialize(), //serialize clicked button parent form 
       success: function(data){ 
        $('#message').html(data);       
       } 
      }); 
     return false; 
    }); 
}); 
</script> 

Answer 2

Trigger-Klick-Ereignis auf die Schaltfläche klicken nicht auf dem Formular klicken:

Dies wird für y arbeiten Ou für jedes Produkt.

<script type="text/javascript"> 

$(document).ready(function(){ 

    $(document).on('click','.add',function (event) {  
     event.preventDefault(); 

     var element = $(this); 
     var id = element.attr("pid"); 
     //alert(id); 

       $.ajax({ 

        url: 'action.php', 
        method: 'post', 
        data: {id:id}, //send id of product you wish to add 
        success: function(data){ 

         $('#message').html(data);       
        } 
       }); 

     return false; 

    }); 

}); 
</script> 

Und auf Server-Seite:

if (!empty($_POST)){ 
    $product_id = $_POST['id'];//get only that id posted in ajax call 
    echo $product_id; 
}