Sumar inputs formulario con jquery

En alguna ocasión nos encontraremos con que queremos ofrecer la suma de los inputs o textfields de nuestro formulario. Con una simple función de jquery conseguiremos mostrar la suma o ecuación que necesitemos.

Sumar campos de formulario con jquery

$(document).ready(function(){
$("input[type='text']").change(function(){
var suma = 0;
suma = Number($("input[id='primernumero']").val());
suma += Number($("input[id='segundo']").val());
suma += Number($("input[id='tercero']").val());
alert(suma);
$("#resultado").text(suma);
});
});

La primera linea nos puede servir para validar cualquier formulario una vez salga de la casilla de texto podremos ver si ha rellenado el campo o si ha introducido texto en lugar de números, etc.

Luego el código es muy fácil de seguir, creamos la variable suma y le vamos sumando el contenido de los otros inputs (se aconseja dar un valor inicial a cada input por ejemplo 0 así nos ahorraremos errores).

Y al final se muestra el resultado con un alert y en un div que se llama resultado.

Hasta aquí este mini tutorial de como sumar campos de formulario con jquery, iremos avanzando un poco mas en el tema.

Deja un comentario