MilkZoft - Cómo sumar cajas de texto en javascript

Escrito por Carlos Hugo el Lunes, 05 de Octubre de 2009 Publicado en: Javascript

3 Comentarios

Hola a todos, en esta ocasión les traigo un tutorial de Javascript para hacer una sumatoria de cajas de texto de forma automática, y la generacion de cajas de texto con un ciclo en PHP.

Primero que nada crearemos nuestras cajas de texto con un ciclo en PHP.

Ahora la explicacion:

Creamos la etiqueta form para hacer nuestro formulario y la cerramos, después hacemos un ciclo en PHP que vaya desde 1 hasta 10, este podría ser hasta cualquier otro numero el que ustedes necesiten, dentro de las llaves del ciclo FOR creamos las cajas de texto, abrimos la etiqueta input y le ponemos un nombre y en el evento  onKeyUp mandamos a llamar la funcion que nos hara la sumatoria de las cajas de texto,y  así se crearan las que ustedes requieran dependiendo el ciclo, y por últimos creamos una caja de texto donde nos mostrara la sumatoria, a esta le pondremos el nombre de Total cabe mencionar que también se le pone el id Total para fines del calculo.

Ya que tenemos el formulario listo, procederemos a crear el Script que nos haga la sumatoria de esas cajas de texto, el codigo es el siguiente:

Bueno, este script es muy sencillo, nuestra función se llama Calcular, empezamos con la primera línea de código Total = 0; se declara en 0 para inicializarla, después en la variable Elements contiene el total de elementos de nuestro formulario llamado "form": document.form.elements.length; enseguida hacemos un ciclo que vaya desde la posición 0 de nuestros elementos hasta la cantidad de elementos menos 2, ¿ porque menos 2?, porque se toma en cuenta el formulario y la caja de texto Total, por eso reducimos a menos dos para no tomarlos en cuenta a la hora de la sumatoria, después comparamos si en esa posición de elemento el atributo value es igual a nada y el valor a sumar lo igualamos a 0, si el valor si tiene un valor lo convertimos a entero y se lo sumamos a total, ¿Porque igualamos el valor a 0?, porque si no lo igualamos el valor que nos devolvería seria False o None y ese valor no se puede sumar, después de recorrer todas las posiciones de nuestro formulario en la con document.getElementById('Total').value = Total; asignamos el total de la sumatoria al elemento cuyo id = Total.

Bueno pues esto ha sido todo espero que haya sido de gran utilidad, en la parte inferior adjunto el archivo para que lo puedan descargar y probar.

Pues hasta aquí llega este tutorial de Javascript, para cualquier duda o pregunta nos pueden visitar en la página http://www.milkzoft.com o en los correos carlos.hugo@milkzoft.com o contacto@milkzoft.com, espero  y les haya sido de gran utilidad este tutorial.

Un Saludo,

Atentamente

NOTA: Este tutorial fue creado por Carlos Hugo González Castell  para MilkZoft, si deseas tomar total o parcialmente el contenido publicado te pedimos nos envíes un mensaje utilizando el formulario de contacto y agregando un enlace a MilkZoft como fuente de los datos (puedes insertar el siguiente código en tu blog o página web).

Fuente: MilkZoft

Descarga este ejemplo

porfavor podrian publicar videos tutoriales de como hacer interfases con las diferentes layaut, y como implementar un evento

COmo sumo o resto fechas ??

por ejemplo en un input este 02/02/2010 y en otro 02/02/2014 y que en un tercer input o un div aparezca   4 años