I have the following field input
to which it automatically sent information via ajax
when I make a change ajax
it receives it without any problem but it only works with the first field input
with the second field input
it does not work, it does not update the quantities of said product, it should be noted that they can be more field input
.
Another problem is that it does not detect change when I use the decrease or increase button , that is, it is not executed, it is ajax
only executed when there is manipulation of the field input input
manually.
<div class="bsk-quantity">
<input id="quantity"
type="text"
name="qtyupdate[1][color-blue][XXL]"
value="1"
class="quantity"
autocomplete="off"
data-validation="number"
data-validation-allowing="float">
<input type="button" value="+" class="plus">
<input type="button" value="-" class="min">
</div>
<div class="bsk-quantity">
<input id="quantity"
type="text"
name="qtyupdate[1][color-red][XL]"
value="1"
class="quantity"
autocomplete="off"
data-validation="number"
data-validation-allowing="float">
<input type="button" value="+" class="plus">
<input type="button" value="-" class="min">
</div>
This is my code ajax
I am using jQuery
, what changes should I use so that it works correctly and does not present the problems that I am presenting?
$(function() {
$(document).ajaxStop(function(){
$('#quantity').keyup(function(evt) {
evt.preventDefault();
var formData = [];
$('input[name^="qtyupdate"]').each(function() {
formData.push(this.value);
});
var formData = $(this).serializeArray();
var url = "/item_cart.php";
$.ajax({
url: url,
type: "POST",
data: formData,
cache: false,
})
.done(function(data) {
let res = JSON.parse(data);
if(res.status){
$("#wrapp-basket").load(" #wrapp-basket").fadeIn('slow');
$("#qty").load(" #qty").fadeIn('slow');
$('.success').fadeIn();
$('.success').html(res.message).delay(2000).fadeOut(2000);
$.getScript("/assets/js/ajax_coupon.min.js");
//return false
} else {
$('.error').fadeIn();
$('.error').html(res.message).delay(2000).fadeOut(2000);
}
})
.fail(function( jqXHR, textStatus ) {
console.log(jqXHR.responseText);
console.log("Request failed: " + textStatus );
})
});
});
});
They
input
can be several since it is oneinput
that is automatically generated for each product added to the shopping cart, say if I add 20 products to the shopping cart, 20 will be generatedinput
since it is in charge of updating how many units it wants for each product. There is also a class with the same name in case of utilityclass="quantity"
attached image for reference.
The first point is that if you want a code to work for multiple
input
or use, you should not useid
theid
are unique also should not be repeated on the same page, then we have to removeid="quantity"
and leave only the classclass="quantity"
Now let's replace this:
By the following:
The selector
$(this)
allows us to position ourselves on a certain element and interact with the child elements.And, we complement with
.find()
returns the method of descendant elements of the selected element. A descendant is a child, grandchild, great-grandchild, and so on. To traverse only a single level down the treeDOM
(to return direct children), use the.children()
.Your inputs have the same id as they say in the comments, therefore you will only get the value of the first one, each id must be unique, I recommend you remove the id from the input and put it in the general div and access the div's inputs general
.js