jQuery: sumar los input de un formulario dinámico

Esta es una consulta que me han hecho hace poco y la publico aquí para todos. Me preguntaban cómo se puede hacer para sumar todos los input de un formulario. El problema era que el formulario era dinámico (es decir, que el usuario podía añadir cuantas líneas quisiera) y no se sabía a priori cuántas líneas iba añadiendo. Esto tiene aplicación, por ejemplo en un carrito de compra.

Una posible solución usando jQuery sería que a cada línea que añadimos dinámicamente al formulario le asignemos la clase “importe_linea”. Luego bastaría con usar esta pequeña función para calcular el total:

function calcular_total() {
	importe_total = 0
	$(".importe_linea").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	$("#total").val(importe_total);
}

Os dejo aquí un ejemplo completo para que veáis la utilidad:

<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript">
function calcular_total() {
	importe_total = 0
	$(".importe_linea").each(
		function(index, value) {
			importe_total = importe_total + eval($(this).val());
		}
	);
	$("#total").val(importe_total);
}
 
function nueva_linea() {
	$("#lineas").append('<input type="text" class="importe_linea" value="0"/><br/>');
}
</script>
 
</head>
<body>
 
<form method="POST" action="nada.html">
	<div id="lineas">
		<input type="text" class="importe_linea" value="0"/><br/>
	</div>
	<label for="total">Total: <input type="text" id="total" value="0"/><br/>
	<input type="button" value="Nueva l&iacute;nea" onclick="nueva_linea()"/>
	<input type="button" value="Calcular" onclick="calcular_total()"/>
</form>
 
</body>

8 thoughts on “jQuery: sumar los input de un formulario dinámico

  1. para guardarlos en base de datos primero deberás poner en el name: name=”linea[]”

    y después al enviar el formulario los recoges como arreglo

  2. Genio como seria eso mismo pero que se fuera sumando automáticamente cada ves que se agregue un nuevo valor sin necesidad de presionar el boton, saludos

  3. Muy buen aporte…! una consulta como restringir la cantidad de nuevas lineas y cada caja de texto tenga determinado un nombre especifico. Desde ya muchas gracias. Soy novato.

Deja un comentario