Post data from one form in a while loop

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

  });
});

You cannot have `id="addToCart"` multiple times. An id must be unique in a document. Same for `id="id"` and `id="page"`. Use classes instead. — Louys Patrice Bessette, Jul 28 '18 at 20:04
@NextZuck please could you provide more details, as well as a minimum working example so we can help understand your problem better. Are there any errors when viewing "Developer tools" (Ctrl + Shift + I) [Google Chrome] in your browser? — Tim Kruger, Jul 28 '18 at 20:05
Re @LouysPatriceBessette reply maybe append the `$product_id` to your `id="addToCart"` `form` tag to make them all unique or alternatively change all your ids to classes as was mentioned in the answer below.. — Tim Kruger, Jul 28 '18 at 20:11
No there are no errors, i tried @LouysPatriceBessette suggestion, all the forms are now submitting but not giving me their exact id's — NextZuck, Jul 28 '18 at 20:17
And any errors in your PHP error log? This link might help you find the PHP error log [Where does PHP store the error log? php5, apache, fastcgi, cpanel](https://stackoverflow.com/questions/5127838/where-does-php-store-the-error-log-php5-apache-fastcgi-cpanel). — Tim Kruger, Jul 28 '18 at 20:24

Louys Patrice Bessette · Accepted Answer · 2018-07-28T20:35:57.710

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

  });
});

edited Jul 28 '18 at 20:35

answered Jul 28 '18 at 20:10

Louys Patrice Bessette

33,375
6
36
64

I tried the above code, the forms are not submitting and there are no errors when viewing in developer mode also. – NextZuck Jul 28 '18 at 20:30
You mentioned something about onClick(); – NextZuck Jul 28 '18 at 20:31
No... I mentionned a user click on the button `class="add_to_cart"`. Add some "console.log()" to see if the function fires... Then if you have the values. Double check if you changed ALL `id=` to `class=`. – Louys Patrice Bessette Jul 28 '18 at 20:33
Your code works fine, my feedback div is not inside the loop so using column.find won't work, i changed it back to `$("#feedback").load`. Thanks for helping out mate. Cheers :) – NextZuck Jul 28 '18 at 20:34

Post data from one form in a while loop

1 Answers1