I have products in loop on collection page and I want to get each product value with jQuery and ajax but code I have, only getting first product value whenever we click on any product’s add to cart button, is only showing of first product, below is my code:
function addItem(form_id) {
var postData = $('#'+form_id).serialize();
alert(postData);
$.ajax({
type: 'POST',
url: '/cart/add.js',
dataType: 'json',
data: $('#'+form_id).serialize(),
success: addToCartOk,
error: addToCartFail
});
}
Here I am checking: https://soft-theme.myshopify.com/collections/all its only getting id=27733468427 which ever button I click
Anyone can help me on this, please?
2
Answers
https://api.jquery.com/each/
You want to use each attribute of jquery. I hope this will help you.
You have several forms with the same ID. This is not allowed in HTML DOM: each
id="..."
attribute should be unique, you can’t use several forms with the sameid="add-to-cart"
. When browser encounters several objects with the sameid
, it ignores other objects with thisid
, becauseid
’s should be unique.You can to use
class="add-to-cart"
instead.(Also, remove the
id="add"
from your add buttons, it’s also a duplicateid
. You can use class instead.)Also, you don’t really need to pass an ID in your code. You can get the form wrapping the element using
this
, which refers to the button clicked (however, it needs to be wrapped with a$
to convert the DOM object into the jQuery object):So, you can use this in your forms:
This is a reference to the
<input type="submit" ... />
element. So, you can just get the form wrapping this element by using.closest
, like this:This is not the recommended way of doing things, though.
onclick="..."
is a deprecated way of doing things, because you are mixing JavaScript with HTML. Instead, it’s recommended to removeonclick="..."
alltogether and bind the event callback in a<script>
code. To do this, just remove theonclick
in your forms:And bind the method using class
add-to-cart
(make sure you’ve made it into the class, otherwise my code won’t work):The code above does the following:
$(function() { ... });
around the code makes sure that the code is only run when all the elements are loaded.$("form.add-to-cart")
finds all the forms withclass="add-to-cart"
$("form.add-to-cart").submit(function () { ... });
adds a callback function. This function will be called each time any form withclass="add-to-cart"
is submited.This is the recommended alternative to
onclick
.Update: the first version of my code had a bug: since
$("form.add-to-cart").submit
is attached to the form, and not to the button, we should use$(this)
to refer to the form. We don’t needclosest
in the second version of the code.