0

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 un input 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 20 input 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 utilidad class="quantity" adjunto imagen como referencia.

introducir la descripción de la imagen aquí

2
  • Básicamente tu primer problema es que tienes varios elementos con el mismo id. Este valor debe ser único en cada documento el 24 sep. 2021 a las 15:46
  • @PabloLozano también tengo una clase con el mismo class="quantity" nombre ¿Si lo uso con la clase funcionara de manera individual o no?
    – Fernando
    el 24 sep. 2021 a las 19:13

2 respuestas 2

1
+150

El primer punto, es que si deseas que un código funcione para múltiples input o uso, no debes usar id los id son únicos además no debería repetirse en la misma página, entonces tenemos que eliminar id="quantity" y, dejar solo la clase class="quantity"

Ahora vamos a reemplazar esto:

$('#quantity').keyup(function(evt) {

Por lo siguiente:

$(this).find('.quantity').keyup(function(evt) {

El selector $(this), nos permite posicionarnos en un determinado elemento e interactuar con los elementos hijo.

Y, complementamos con .find() devuelve el método de elementos descendientes del elemento seleccionado. Un descendiente es un niño, nieto, bisnieto, y así sucesivamente. Para atravesar solamente un solo nivel hacia abajo el árbol DOM (para volver hijos directos), utilice los .children() método.

0

Tus inputs tiene el mismo id como lo dicen en los comentarios por lo tanto solo se va obtener el valor del primero,cada id debe ser unico,te recomiendo quitar los id de los input y ponerselo al div general y acceder a los inputs del div general

<div class="bsk-quantity">
    <input 
        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 
        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>

.js

$(function () {
  $(document).ajaxStop(function () {
    $("#quantity1").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";
      sendAjax(formData, url);
    });

    $("#quantity2").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";
      sendAjax(formData, url);
    });
    function sendAjax(formData, url) {
      $.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);
        });
    }
  });
});
2
  • Hola, esta alternativa no me conviene, en primer lugar porque aquellos input los genera el carro de la compra es decir por cada producto agregado al carrito de la compra se va crear el mismo input para cada producto lo único que va cambiar de ese input son los valores de value y los atributos name cabe recalcar que también dispongo de una clase con el mismo nombre del id por si ayuda en algo class="quantity"
    – Fernando
    el 24 sep. 2021 a las 19:16
  • He actualizado mi pregunta, saludos.
    – Fernando
    el 24 sep. 2021 a las 19:23

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.