Skip to main content
se añadieron 1989 caracteres en el cuerpo
Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

ACTUALIZACIÓN:

esta vez utilizando el valor del atributo `name``

let forms = Array.from(document.querySelectorAll("#contenedor form"));

forms.map((f) =>{
  let caja = f.querySelector("[name='caja']");
  let precio = f.querySelector("[name='precios']");
  let total = f.querySelector("[name='totales']");
  caja.addEventListener("input", ()=>{CalculaTotal(caja,precio,total) })
  precio.addEventListener("input", ()=>{CalculaTotal(caja,precio,total)})

})


function CalculaTotal(caja,precio,total){total.value = parseFloat(caja.value) * parseFloat(precio.value)}
<div id="contenedor">
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="15" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="15" placeholder="Cantidad">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="40" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="40"><!--cantidad-->
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="20" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="20">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="10" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="10">
<input type="text" name="totales" class="total">
</form>
</div>

Espero que esto funcione para ti

ACTUALIZACIÓN:

esta vez utilizando el valor del atributo `name``

let forms = Array.from(document.querySelectorAll("#contenedor form"));

forms.map((f) =>{
  let caja = f.querySelector("[name='caja']");
  let precio = f.querySelector("[name='precios']");
  let total = f.querySelector("[name='totales']");
  caja.addEventListener("input", ()=>{CalculaTotal(caja,precio,total) })
  precio.addEventListener("input", ()=>{CalculaTotal(caja,precio,total)})

})


function CalculaTotal(caja,precio,total){total.value = parseFloat(caja.value) * parseFloat(precio.value)}
<div id="contenedor">
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="15" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="15" placeholder="Cantidad">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="40" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="40"><!--cantidad-->
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="20" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="20">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="10" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="10">
<input type="text" name="totales" class="total">
</form>
</div>

Espero que esto funcione para ti

Origen Enlace
enxaneta
  • 3.9k
  • 3
  • 12
  • 21

No se si te he entendido bien. Lo que entiendo es que necesitas para cada formulario multiplicar la caja con el precio, y poner el resultado dentro del input totales. Espero haberlo acertado.

PD: el html me lo he inventado en base a tu código.

let forms = Array.from(document.querySelectorAll("#contenedor form"));

forms.map((f) =>{
  let caja = f.querySelector(".caja");
  let precio = f.querySelector(".precio");
  let total = f.querySelector(".total");
  caja.addEventListener("input", ()=>{CalculaTotal(caja,precio,total) })
  precio.addEventListener("input", ()=>{CalculaTotal(caja,precio,total)})

})


function CalculaTotal(caja,precio,total){total.value = parseFloat(caja.value) * parseFloat(precio.value)}
<div id="contenedor">
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="15" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="15" placeholder="Cantidad">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="40" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="40"><!--cantidad-->
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="20" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="20">
<input type="text" name="totales" class="total">
</form>
<form name="sumar1" id="sumar1">
<input type="text" name="caja" class="caja" value="10" />
<input type="number" name="precios" class="precio" class="form-control" value="1" min="1" max="10">
<input type="text" name="totales" class="total">
</form>
</div>