javascript - JQUERY post method always return to first table

Question

im start to learn jquery ajax, so i modify my web to ajax but its still error when passing data, its success to acces but always return to first column

here my code for call a value:

while ($r=mysql_fetch_array($query)) {
<a id="tambahkan-cart"  value='.$r[id_product].' data-toggle="modal" href="#modal-one"  class="btn btn-default add-to-cart"><i class="fa fa-shopping-cart"></i>Add to cart</a>
}

here my code for calling with click

$("#tambahkan-cart").click(function() {
        event.preventDefault();
        
                var id_product = $(this).attr("value");
                $.ajax({
                    url: 'tambah-cart.php',
                    type: 'POST',
                    data: {
                        id_product: id_product
                    },
                    success: function(data) {
                        $("#modal-body").html(data);
                    }
                });
            });

here tambah-cart.php.. i need to pass the data here,, but its return to value='1',.. I want to pass data dinamically

$idp=$_POST['id_product'];
$q=mysql_query("SELECT * from `product` WHERE id_product='$idp' ");

im appreciate if you tell me where is my wrong ... i used different value for different id_product when click, but its return to first column,,,.. thanks

标签： javascriptphpjquerymysqlajax

Answer 1

I thought I would draw your attention to this code too. It has to do with the event

Change this

$("#tambahkan-cart").click(function() {
   event.preventDefault();
   var id_product = $(this).attr("value");
   $.ajax({
      url: 'tambah-cart.php',
      type: 'POST',
      data: {
      id_product: id_product
      },
      success: function(data) {
        $("#modal-body").html(data);
      }
   });
 });

To

$("#tambahkan-cart").click(function(event) {
   event.preventDefault();
   var id_product = $(this).attr("value");
   $.ajax({
      url: 'tambah-cart.php',
      type: 'POST',
      data: {
      id_product: id_product
      },
      success: function(data) {
        $("#modal-body").html(data);
      }
   });
 });