1

Buenas estoy iterando unos resultados obtenidos a través de una consulta por AJAX. Con append muestro los resultado en la pantalla, pero necesito enviar lo siguiente.

Esto está en el success de un ajax

$('#zonaProductos').append('<div class="lasCat seleccionProducto center" >\
       <div class="addPrueba" data-id="'+ productos[i].id +'">\
          <img src="'+ productos[i].foto +'" alt="" class="img-fluid">\
          <h2>'+ productos[i].name +'</h2>\
          </div>\
          <input class="form-control" type="number" id="cantidad" name="cantidad" value="1">\
        </div>');  
                                                      
        $("input[type='number']").inputSpinner(); 

Luego tengo una función que obtengo el id del producto que pulso

$('#zonaProductos').on( 'click', '.addPrueba', function(){
    var idProducto = $(this).data("id"); //Aquí obtengo el id del producto que pulso
    var cantidad = $("input[name=cantidad]").val(); //Aquí intento obtener el valor que tiene el input cantidad del producto que pulso
   ......
   .......

});

Pero no me funciona, me traer el valor de cantidad siempre del primero que pulso, como lo puedo hacer, lo he intentado así $(this).val("input[name=cantidad]"); pero tampoco me funciona.

Alguna sugerencia?

4
  • Conviene incluir siempre en la pregunta un Ejemplo Mínimo y Verificable para poder probar el código. Estás hablando de iterar, por lo que se supone que en la parte del append (1er bloque de código) se podrían estar creando varios elementos... si es así ya hay un error ahí y es que estarías asignando el mismo id a más de un elemento, lo cual no es correcto. Dicho eso, en la pregunta no queda claro el contexto en que se encuentran los elementos, lo cual podría ser fundamental para una buena respuesta en casos como estos, pues la selección podrían hacerse según la ubicación del elemento.
    – A. Cedano
    el 19 sep. 2021 a las 20:13
  • Hola @A.Cedano en lo que repito id te refieres en el input no? No se como crear un ejemplo para que se pueda probar ya que saco los registros desde la BD y soy bastante nob en JavaScript :S
    – Miguel
    el 19 sep. 2021 a las 20:16
  • Me refiero a esto: <input class="form-control" type="number" id="cantidad" name="cantidad" value="1"> si este código ocurre en un bucle o se ejecuta varias veces, estarías creando un elemento con el mismo id varias veces, lo cual es incorrecto. Cuando luego quieras alcanzar ese elemento por su id nunca se sabrá a cual alcanzará, así que los id deben ser únicos. En cuanto a mostrar un Ejemplo Mínimo y Verificable es tan simple como abrir el código fuente en el navegador y poner en la pregunta una parte de los elementos que se generen (HTML) y el Javascript respectivo, así vemos el contexto.
    – A. Cedano
    el 19 sep. 2021 a las 20:19
  • Ok si lo que me imaginaba aunque no estaba utilizando ese id, voy a ver como puedo mostrar un ejemplo gracias!
    – Miguel
    el 19 sep. 2021 a las 20:20

1 respuesta 1

1

seria también así

var idProducto = $(this).attr("data-id");
var cantidad = $(this).next("input[name=cantidad]").val();

/* Mira la salida en consola para saber si son los datos que necesitas */
console.log( idProducto );
console.log( cantidad );

El otro problema es que cuando se le da click el evento se dispara en el input directamente y no en el padre class .addPrueba, ahí podrías entonces cambiar de disparador de eventos en lugar de para el padre para el hijo, si me das mas información podría ayudarte mas, infórmame por favor si te funcionó.

3
  • Hola @NelsonR.Graña me devuelve un undefined
    – Miguel
    el 20 sep. 2021 a las 11:14
  • Edite, no es el método children() no había visto el cierre de carro del div por tanto input no es el hijo de .addPrueba, es un hermano y en su lugar se usa next() el 20 sep. 2021 a las 13:55
  • Ahora funciona perfecto @NelsonR.Graña muchisimas gracias!
    – Miguel
    el 20 sep. 2021 a las 15:48

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.