在while循环中以一种形式发布数据

Question

I'm trying to post data from a single form in my PHP inside a while loop to another page using jQuery load. Currently when I view the output, only the first result gets to be submitted. When I click on the rest of the forms it keeps refreshing the page. How can I make all the forms to post unique data from my PHP page?

Here is my PHP script:

while (mysqli_stmt_fetch($select_product)): ?>
<div class="col-md-4 top_brand_left" style="margin-top:40px;">

  <div class="hover14 column">
    <div class="tm_top_brand_left_grid">
      <div class="tm_top_brand_left_grid_pos">
      </div>
      <div class="tm_top_brand_left_grid1">
        <figure>
          <div class="snipcart-item block">
            <div class="snipcart-thumb">
              <a href="javascript:void(0)"><img class="lazy" title="" alt="" src="/web/images/spinner.gif" data-original="/web/images/<?php echo $product_image; ?>"></a>
              <p><?php echo htmlentities($product_name); ?></p>
              <h4><?php echo "&#8358;".$product_price; ?><span></span></h4>
            </div>
            <div class="snipcart-details top_brand_home_details">
              <form id="addToCart" method="post">
                <fieldset>
                  <input type="hidden" name="id" id="id" value="<?php echo htmlentities($product_id); ?>">
                  <input type="submit" id="add_to_cart" name="add_to_cart" value="Add to cart" class="button">
                </fieldset>
              </form>
            </div>
          </div>
        </figure>
      </div>
    </div>
  </div>
</div>
<?php endwhile; ?>

Here is my jQuery script:

$("#addToCart").submit(function(event){
  event.preventDefault();

  var page = $("#page").val();
  var id = $("#id").val();
  var cat_id = $("#cat_id").val();
  var res_name = $("#res_name").val();
  var add_to_cart = $("#add_to_cart").val();

  $("#feedback").load("/web/cart.php", {

    page:page,
    id: id,
    cat_id: cat_id,
    res_name: res_name,
    add_to_cart: add_to_cart

  });
});

Answer 1

Change all your ids for classes in your PHP loop.

Then on click, look for the closest .column to find the relevant element.

$(".addToCart").submit(function(event){
  event.preventDefault();

  var column = $(this).closest(".column");

  var page = column.find(".page").val();
  var id = column.find(".id").val();
  var cat_id = column.find(".cat_id").val();
  var res_name = column.find(".res_name").val();
  var add_to_cart = $(this).val();

  $("#feedback").load("/web/cart.php", {  // This element is outside the PHP loop and has a unique id.

    page:page,
    id: id,
    cat_id: cat_id,
    res_name: res_name,
    add_to_cart: add_to_cart

  });
});