Tengo los siguientes campo input
al cual envió automáticamente información vía ajax
cuando realizo algún cambio ajax
lo recibe sin ningún problema pero solo funciona con el primer campo input
con el segundo campo input
no funciona, no me actualiza las cantidades de dicho producto, cabe recalcar que pueden ser más campo input
.
Otro problema es que no detecta cambio cuando utilizo el botón disminuir o incrementar es decir que no se ejecuta ajax
solamente se ejecuta cuando existe manipulación de la entrada del campo input
manualmente.
<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>
Este es mi código ajax
estoy utilizando jQuery
, ¿Qué cambios debo emplear para que funcione correctamente y, no presente los problemas que estoy presentando?
$(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 );
})
});
});
});
Los
input
pueden ser varios ya que es uninput
que se genera automáticamente por cada producto agregado al carro de la compra, por decir si agrego 20 productos al carro de la compra se me va generar 20input
ya que el mismo es el encargado de actualizar cuantas unidades quiere por cada producto. También existe una clase con el mismo nombre por si de utilidadclass="quantity"
adjunto imagen como referencia.
id
. Este valor debe ser único en cada documentoclass="quantity"
nombre ¿Si lo uso con la clase funcionara de manera individual o no?