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>

jQuery: recoger valores de un formulario

Esta vez os dejo un pequeño resúmen de cómo se recogen, con jQuery, valores de un formulario.

El “truco” está en poner un id a los elementos del form para poder acceder a ellos fácilmente.

Cuadro de texto “normal” (input text)

<input id=”nombre” name=”nombre” type=”text” />

var fianza = $("input#nombre").val();

Recoger el valor de un Textarea

<textarea id=”concepto”></textarea>

var concepto = $("textarea#concepto").val();

Recoger el valor de un campo oculto

<input type=”hidden” id=”id_cliente”/>

var id_cliente = $("input:hidden#id_cliente").val();

Comprobar si un checkbox está marcado

<input type=”checkbox” id=”mostrar_valores”/> Mostrar valores

var mostrar_valores = $('#mostrar_valores:checked').val();