2

Tengo un formulario en el que agrego inputs dinamicamente (cantidad, precio), quiero hacer la multiplicación de ambos, me funciona en la primera fila pero al agregar las demás es donde tengo problemas para diferenciar los campos. Estoy trabajando con Ruby on rails y la gema cocoon para agregar los campos dinámicamente

Filas

<div class="nested-fields">
<div class="form-row">
  <div class="form-group col-3 col-md-4"> 

    <%= f.collection_select(:product_id, Product.all, :id, :pro_nombre, {prompt: "Selecciona un producto"}, {class: "form-control", placeholder: "Producto"}) %>
  </div>
  <div class="form-group col-2 col-md-2 offset-2">
    <%= f.number_field :ordDet_cantidad, class: "form-control", placeholder: "cantidad", id:"cantidad", oninput: "multiplica(this.value, '#precio');" %>

  </div>
  <div class="form-group col-3 col-md-2">
    <%= f.number_field :ordDet_precio, class: "form-control", placeholder: "Precio", id:"precio", oninput: "multiplica2(this.value);" %>

  </div>
  <div class="form-group col-3 col-md-1">
    <%= f.label "-", class: "text-right", id: "precioCantidad"%>
  </div>
  <div class="form-group col-1 col-md-1">
    <%= link_to_remove_association "Quitar", f, class: "btn btn-outline-warning" %>
  </div>
</div>

Código Javascript

<script type="text/javascript">
  function multiplica (cantidad, ṕrecio) {
   var total = 0;
   var precio = document.getElementById("precio").value;
   cantidad = parseInt(cantidad);

   total = (parseInt(precio) * parseInt(cantidad));

    document.getElementById('precioCantidad').innerHTML = total;
   }

  function multiplica2(precio) {
   precio = parseInt(precio)
   var cantidad = document.getElementById("cantidad").value;
   multiplica(cantidad, precio);
  }
 </script>

Resultados Resultados

1 respuesta 1

2

Recuerda, solo 1 elemento puede tener el mismo Id, y al generar los campos dinamicamente, es mas complicado generarle un Id a cada uno y almacenarlo para un futuro. En este caso es mejor usar class, pues varios elementos pueden tener la misma clase.

Ahora, puedes usar 1 clase para los campos que sean el precio y otra clase para los campos que sean la cantidad de un producto.

Después con JS puedes obtener una lista de todos los elementos/campos con la clase de los precios y otra lista para los elementos/campos con la clase de las cantidades. Puedes usar el comando getElementsByClassName().

Ahora puedes iterar entre 1 de esas listas. Fuera del bucle declara una variable la cual sera el total de todo. Dentro del bucle sumale a esa variable el resultado de la multiplicación entre el valor del campo en la lista de campos de precio con el index actual del bucle por el valor del campo en la lista de campos de cantidad con el index actual del bucle. Al terminar el bucle for, ya tendrás el resultado total.

Se que puede ser difícil de comprender así que te deje un ejemplo. Puedes ejecutarlo, para que veas que funciona y después adaptarlo a tus necesidades.

Ejemplo

function contarTotal() {
    inputsPrecio = document.getElementsByClassName('input-precio');
    inputsCantidad = document.getElementsByClassName('input-cantidad');

    var totalAPagar = 0;
    for (let index = 0; index < inputsCantidad.length; index++) {
        totalAPagar += (Number(inputsPrecio[index].value) * Number(inputsCantidad[index].value));
    }
    console.log(totalAPagar);
}
    <div>
        <label>Precio 1</label>
        <input type="number" class="input-precio">

        <label>Cantidad 1</label>
        <input type="number" class="input-cantidad"><br>
    </div>

    <div>
        <label>Precio 2</label>
        <input type="number" class="input-precio">

        <label>Cantidad 2</label>
        <input type="number" class="input-cantidad"><br>
    </div>

    <div>
        <label>Precio 3</label>
        <input type="number" class="input-precio">

        <label>Cantidad 3</label>
        <input type="number" class="input-cantidad"><br>
    </div>

    <button onclick="contarTotal()">Calcular</button>

Unos tips: si usas type="number" no dejara que se ingrese algo que no sea un numero. Y siempre al sacar el valor de un input (o por lo menos casi siempre) el valor sera un string, en este caso use Number('str') para asegurarme de que este multiplicando numeros y no strings.

1
  • Esto era lo que necesitaba. Solo adecue para que me muestre el valor por cada fila. Muchas gracias el 28 abr. 2019 a las 18:47

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.