Q:
Add to cart button with jQuery
I'm not sure if this is possible but what i need is to have the add to cart button in an AJAX form.
$(function() {
var $container = $('#container');
$container.on("click", ".add-to-cart", function(e) {
var $this = $(this);
var product_id = $this.attr('data-id');
$this.closest('.button').html('Adding...');
$.ajax({
url: 'products/ajax/add-to-cart/' + product_id,
type: 'post',
data: $this.closest('.button').find('input[name]').serialize(),
success: function(response) {
$this.closest('.button').html('Add to Cart');
}
});
});
});
So what i want to do is to change the button by its id and keep the data-id. How do i do that? What should i write in the 'Add to Cart' part. Because as you can see, the code is just changing the button html. But it has no id so it can't grab the data-id. Any ideas?
A:
and then you have to change your ajax function like below
$(function() {
var $container = $('#container');
$container.on("click", ".add-to-cart", function(e) {
var $this = $(this);
var product_id = $this.attr('data-id');
$this.closest('.button').html('Adding...');
$.ajax({
url: 'products/ajax/add-to-cart/' + product_id,
type: 'post',
data: $this.closest('.button').find('input[name]').serialize(),
success: function(response) {
var addtocartbutton = $("#product"+product_id);
addtocartbutton.html('Add to Cart');
}
});
});
});
and in you php do what you want according to product id you are sending
A:
You can do it like:
success: function(response) {
var addtocartbutton = $this.closest('.button').find('input[name]').attr('id');
addtocartbutton.remove();
var newProduct = $('#addtocart').val(response);
$(newProduct).closest('.button').html('Add to Cart');
}
$(function() {
var $container = $('#container');
$container.on("click", ".add-to-cart", function(e) {
var $this = $(this);
var product_id = $this.attr('data-id');
$this.closest('.button').html('Adding...');
$.ajax({
url: 'products/ajax/add-to-cart/' + product_id,
type: 'post',
data: $this.closest('.button').find('input[name]').serialize(),
success: function(response) {
var addtocartbutton = $this.closest('.button').find('input[name]').attr('id');
addtocartbutton.remove();
var newProduct = $('#addtocart').val(response);
$(newProduct).closest('.button').html('Add to Cart');
}
});
});
});
Here is the DEMO.
A:
you can do like:
$.ajax({
url: 'products/ajax/add-to-cart/' + product_id,
type: 'post',
data: $this.closest('.button').find('input[name]').serialize(),
success: function(response) {
$this.closest('.button').html('Add to Cart');
var id=$(this).parent().find('input[name="product_id"]').val();
}
});
And id var will be:
$this.closest('.button').parent().find('input[name="product_id"]').val();
Hope help.
Working Demo
