ajax呼び出しは最後のIDのみを返します

Question

私はajaxを使用してカートに追加機能を開発しようとしていますが、問題は、カートに追加する製品に関係なく、リストの最後の項目を追加し、他の製品をクリックしてください。ここに私のコードは次のとおりです。 - ここに

<?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++; 
} 
?> 

は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> 

ここでは最後の最後のidは4

ある場合、$ PRODUCT_IDは、常に（たとえば）4として返し、 action.phpですボタン上の

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

Answer 1

は、以下のようにそれを実行する必要があります - 。アヤックスで

<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

トリガクリックイベントフォームのクリックではないクリック：

これは、yのために動作します各製品ごとに

<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> 

とサーバ側で：

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