1

Con el foreach voy generando varios <div class="product-quantity"> y en c/u de estos div tengo un input number. esta es la estructura:

<div class="product-quantity">
     <input type="number" class="quantity" value="2" min="1">
</div>

Cundo llamo a la funcion Comprar(); desde el boton Comprar, necesito obtener la cantidad elegida en c/u de los input number desde js/jquery y agregarlos a un array. De la forma que lo estoy haciendo me muestra los valores vacíos.

Aca function Comprar() de javascript:

function Comprar() {

        var arrPrice = [];
               
        $('.product>.product-price').map(function () {           
            arrPrice.push(this.innerHTML);
        });
            
        
        //cargando la cantidad de los input number
        
        var arrQuantity = [];
             
        $('.product-quantity>.quantity').map(function () {
            alert(this.innerHTML);//el alert muestra lso valores vacios
            arrQuantity.push(this.innerHTML);
        });
             
    }

Aca muestro la view con el foreach que va generando los divs con los input number.

@model List<Librery_MVC.Models.LightBook>

<div class="shopping-cart" id="ca">

        <div class="column-labels">
            <label class="product-image">Image</label>
            <label class="product-details">Product</label>
            <label class="product-price">Precio</label>
            <label class="product-quantity">Cantidad</label>
            <label class="product-removal">Remove</label>
            <label class="product-line-price">Total</label>
        </div>

        @foreach (LightBook item in Model)
        {

            <div class="product">

                <div class="product-image">
                    <img src="~/@item.UrlImagen">
                </div>

                <div class="product-details">
                    <div class="product-title">@item.Nombre</div>                   
                </div>

                <div class="product-price">@item.Precio</div>

                <div class="product-quantity">
                    <input type="number" class="quantity" value="2" min="1" max="">
                </div>

                <div class="product-removal">
                    <button class="remove-product" value="@item.IdLibro">
                        Remove
                    </button>
                </div>

                <div class="product-line-price">@item.Precio</div>

            </div>

        }
        
<button class="checkout" onclick="Comprar();">Comprar</button>

3 respuestas 3

2
  • Obtén y asigna en variables:
    • El botón comprar por medio de su id o class
    • Todos los inputs de los cuales quieres obtener su cantidad, por medio de la clase que tienen en común a través del método querySelectorAll() así no tendrías que usar el selector de hijo directo
  • Declara una variable que esté igualada a un vector vacio y posterior llenaremos con las cantidades recuperadas
  • A la variable que igualamos con el botón comprar dale un listener en su evento click
  • En la función que este listener recibe podrás:
    • Iterar los valores de la lista de nodos que nos regresó querySelectorAll()
    • Hacer un push del atributo value al vector declarado con anterioridad
  • Una vez realizado el paso anterior, imprimimos por fuera del ciclo el vector recién llenado
  • innerHTML nos permite modificar el texto de un elemento del DOM, no comprendo el uso que le estás dando
  • Como todos los valores que llegan de los inputs originalmente son representaciones de tipo string, entonces en el proceso de hacer push uso el objeto Number() para hacer un cast de los valores y que se almacenen como representaciones numéricas

Propuesta

    <div class="product-quantity">
         <input type="number" class="quantity" value="2" min="1">
    </div>
    <div class="product-quantity">
         <input type="number" class="quantity" value="2" min="1">
    </div>
    <button id="comprar">Comprar</button>
    <script>
      let cantidades  = document.querySelectorAll('.quantity');
      let botonCompra = document.getElementById('comprar');
      let cantidadesAcumuladas = [];
      
      botonCompra.addEventListener('click', () => {
        cantidades.forEach((cantidad) => {
          cantidadesAcumuladas.push(Number(cantidad.value));
        });
        console.log(cantidadesAcumuladas);
      });
    </script>

1

Añado otra forma de resolverlo sin jquery y con un bucle mas clasico, utilizo el selector getElementsByClassName el cual voy tomando los datos y añadiendolos al array con un bucle las funciones que generan los divs aleatoriamente son solo para emular tus libros

----funcionalidad extra----

  1. El boton limpiarArray limpia el array para que no se esten concatenando los arrays unos con otros tambien se puede limpiar el array antes de realizar el bucle que los añade al array para asi no comprar muchas veces los mismos objetos.
  2. El boton reset reinicia la funcionalidad para tener nuevos datos.

var cu = [];
const generadorCuality  = ()=>{
let vueltas = generaBucle(1,20);
var cuadro = document.getElementById("cuadro")
  for (let i = 0; i < vueltas; i++) {
  cuadro.innerHTML +=`<div class="product-quantity">
  <input type="number" class="quantity" value="${generaBucle(0,100)}" min="1">
  </div>`;
    
  }
}
const generaBucle =(min, max) => {
  return Math.floor(Math.random() * (max - min)) + min;
}

const comprar =() => {
  let x = document.getElementsByClassName("quantity");
  for (let i = 0; i < x.length; i++) {
    //cu.push(x[i].value);//forma clasica
    if(x[i].value){cu.push(x[i].value);} //con esta forma no añades los vacios
    
  }
  console.log('array datos => '+cu);
}
const limpiarArray = ()=>{
  
}
generadorCuality();
console.log('array vacio => '+cu);
<button class="checkout" onclick="cu=[];cuadro.innerHTML='';generadorCuality();">Reset</button>
<button class="checkout" onclick="comprar();">Comprar</button>
<button class="checkout" onclick="cu=[]">limparArray</button>
<div id=cuadro>
</div>

0

siguiendo sus pasos lo solucione de esta forma:

function Comprar() {

        var arrPrice = [];
               
        $('.product>.product-price').map(function () {           
            arrPrice.push(this.innerHTML);
        });
                               
      //Obteniendo las cantidades elegidas de los input number
        
        let cantidades = document.querySelectorAll('.quantity');
        let cantidadesAcumuladas = [];
        cantidades.forEach((cantidad) => {
            cantidadesAcumuladas.push(Number(cantidad.value));
        });
             
    }

0

Tu Respuesta

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

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