JavaScript » Calculo de totales y subtotales en JavaScript
Hace unos días publicábamos el artículo "Formulario que multiplica números en JavaScript". Uno de los comentarios, preguntaba que como se podría ampliar el ejemplo para gestionar un catalogo de productos y calcular totales y subtotales. La verdad es que me pareció un ejemplo muy útil y he decidido el explicarlo.
Partimos de un formulario HTML que gestionará un pedido de frutas. Cada línea del formulario estará compuesta por tres campos.
- El primer campo indicará el número de unidades a adquirir de un producto. Este será un campo de tipo "text"
- El segundo campo será el valor de cada una de las unidades del producto. En este caso no nos va a interesar mostrar este campo. Es por ello que lo crearemos como un campo de formulario oculto. Esto lo conseguimos indicando que el tipo es "hidden". Si que es cierto que nos interesará mostrar el precio por unidad a usuario. Pero esto lo podemos hacer con un simple texto.
- El tercer y último campo es el total. El cual corresponde a la multiplicación del número de unidades multiplicado por el precio por unidad
El código HTML que utilizaremos será el siguiente:
<input type="text" size="3" id="peras" value="0" ">uds <input type="hidden" id="precioperas" value="2"/>2€ <input type="text" size="8" id="totalperas" value="0">€
Si nos fijamos en el código, hemos utilizado el atributo ID de los elementos para darles a cada uno un identificador. De esta manera podremos acceder a su contenido, vía JavaScript, de una manera muy sencilla.
Ahora utilizamos el JavaScript para calcular el total. Esto lo haremos mediante el evento onChange del campo de las unidades. Es decir, cuando cambie el valor de las unidades, calcularemos el subtotal. A esta gestión de eventos le asociaremos una función JavaScript, la cual llamaremos calcular(). Que será de la siguiente forma:
<SCRIPT>
function calcular(){...}
</SCRIPT>
Esta función recibirá 4 valores:
- cantidad, número de unidades.
- precio, precio por unidad
- inputtext, será el objeto que represente al campo con el subtotal.
- totaltext, será el objeto que almacene el total de todos los productos
Veamos la función:
function calculo(cantidad,precio,inputtext,totaltext){...}
Su código será muy sencillo:
function calculo(cantidad,precio,inputtext,totaltext){
// Calculo del subtotal
subtotal = precio*cantidad;
inputtext.value=subtotal;
//Calculo del total
total = eval(totaltext.value);
totaltext.value = total + subtotal;
}
Las dos primeras líneas multiplican los valores de unidades y precio x unidad. El resultado lo almacenan en el valor del objeto.
De una misma forma, si nos fijamos el las dos últimas líneas de código, lo que se hace es recuperar el valor almacenado en el total y se le suma el subtotal. En este caso hay que tener en cuenta que el valor que se recupera de un campo input text del formulario es una cadena. Es por ello que nos apoyaremos en la función eval() para convertirlo en un numérico y operar con el como tal.
Para finalizar asociaremos la función calcular al evento onChange.
<input type="text" size="3" id="peras" value="0" onChange="calculo(this.value,precioperas.value,totalperas,total);">uds
Para pasarle los valores hemos utilizado los ID. En algunos casos para recuperar los valores (atributo value) y en otros para hacer referencia a los propios objetos.
Artículos relacionados:
Enero 16, 2007 #
He intentado ‘visualizar el ejemplo’ y ‘descargar el código’, pero siempre surge la página ‘Vaya’ diciendo que no aparece el recurso solicitado.
En cualquier caso, ¡Muchas gracias por su atención y rapidez!
Enero 17, 2007 #
Ya está solucionado. No se que ha podido pasar.
Si tienes cualquier otro problema no dudes en escribir.
Gracias por el mensaje.
Enero 22, 2007 #
Muy bueno el código!!! Lo probé y lo unico que le agregaría sería un boton para que actualice el total porque si modificas la cantidad no funciona bien… Se puede hacer? Cómo?
Abril 24, 2007 #
Hola! Revisé el código y esta muy bueno. Tengo un problema un “poco” parecido, pero no sé si se puede hacer con javascript, estoy desarrolando una aplicación asp.net, en un formulario tengo 4 textbox, el primero con la fecha del ingreso a la jornada laboral (ej. 24/04/2007) un segundo con la hora de ingreso (ej. 20:00 horas) un tercero con la fecha de salida de la jornada laboral (ej. 25/04/2007) y finalmente uno con la hora de salida (01:00 horas). Debo poder mostrar el tiempo transcurrido en otro textbox pero debe hacerse sin usar ningún botón (por lo que necesito usar javascript), con un botón no habría problema, pero me piden “ahorrarle al usuario tener q dar un clic para ver el resultado”, agradecería me puedan dar una ayudita.
Mayo 3, 2007 #
esta muy bien este ejemplo, lo utilice en mis formularios y funciona ok, pero no he podido implementar bien que me saque el gran total dinamicamente, ya que al volver a cambiar un total de fila el sigue sumando y sumando con el valor anterior, creo que hay que construir un array y cada vez sumar todos los totales de fila…….
Mayo 3, 2007 #
El codogo es bueno pero tengo una duda se podra utilizar este codogo en un programa donde se tiene una factura y se necesita tomar la cantidad y el precio multiplicarlos y que el resultado se refleje en el cuadro de texto del subtotal. Yo no he podido hacer que funcione
Junio 21, 2007 #
si multiplico por un número no entero (0,18), puedo hacer q aproxime a un numero entero.. y no me muestre los resultados con decimales?
Septiembre 12, 2007 #
Me gustaría saber si se puede iniciar el campo de un formulario con una variable, por ejemplo, con datos de una cookie, pues el atributo value solo me ofrece un valor inicial que no admite expresiones. o eso creo yo, si alguien me puede ayudar se lo agradeceria.
Octubre 13, 2007 #
necesito el codigo para realizar un programa en java script para sumar restar multiplicar dividir pero educativo en donde me pida un nombre y al azar el programa despliegue 2 cifras , ademas de 4 opciones : suma ; resta ; multiplicacon; division . luego una caja de texto en donde el usuario (un niño) despues de haber seleccionado una opcion coloque alli en la caja de texto lo que el cree es el resultado de su operacion seleccionada , si es correcto el programa debe mostrarle un mensaje en donde lo felicite ; de lo contrario un mensaje indicandole repetir la respuesta, agradezco su ayuda
Noviembre 5, 2007 #
el programa funciona bien inicialmente pero cuando regresas todos los valores a cero, el total permanece con la suma, y si modificas un la cantidad de un producto, el resultado se suma al anterior, yo recién estoy aprendiendo a programar en html pero me parece que si se puede solucionar.