Cálculo de totales y subtotales en JavaScript

11/Ene/2007 JavaScript , , 40 Comentarios

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:

  1. <input type="text" size="3" id="peras" value="0" ">uds
  2. <input type="hidden" id="precioperas" value="2"/>2€
  3. <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:

  1. function calcular(){...}
  2. </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:

  1. function calculo(cantidad,precio,inputtext,totaltext){...}

Su código será muy sencillo:

  1. function calculo(cantidad,precio,inputtext,totaltext){
  2.  
  3. // Calculo del subtotal
  4. subtotal = precio*cantidad;
  5. inputtext.value=subtotal;
  6.  
  7. //Calculo del total
  8. total = eval(totaltext.value);
  9. totaltext.value = total + subtotal;
  10. }

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.

  1. <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.

Vídeos sobre Javascript


Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

40 comentarios en “Cálculo de totales y subtotales en JavaScript”

Víctor Cuervo

jasiel

hola estoy empezando a programar con javascript quisiera que me ayudara con un para de programas que no he podido correr sin error.
1.convertidor de medidas de un sistema a otro o dentro de un mismo sistema.
2. sistema web para calcular la planilla de una empresa de N empleados.

Víctor Cuervo

Edgar

E ocupo el codigo para que me arroje un monto total el precio del producto lo tengo en una base de datos y el producto tambien lo que hice fue una relacion entre esas dos tablas caundo yo selecciono el producto me arroja el precio en un formulario lo que yo quiero es que me mande el monto total si el cliente me pide mas de un producto gracias ……..

Víctor Cuervo

Víctor Cuervo

Edgar, pon el código fuente para poder revisarlo o casi mejor que nos lo pegues en el foro. http://www.dudasprogramacion.com para poder echarlo un ojo y ayudarte.

Saludos.

Víctor Cuervo

saul

tengo una duda quiero hacer lo mismo pero para una tabla dinámica que va agregando filas sabes como hacerlo por que solo me funciona con la primera.

Víctor Cuervo

Víctor Cuervo

El código sería muy parecido. Se debería de generalizar la función de cálculo y meter el añadir filas dinámicamente. Nos parece un ejemplo interesante, vamos a ponernos con él y publicarlo para que podáis ver cómo se hace.

Saludos.

Víctor Cuervo

Daniel

¿Y como harias para limitar los decimales a 2?

Víctor Cuervo

Víctor Cuervo

Hola Daniel,

¿Dices de limitar la entrada en los campos de texto a dos decimales?

Saludos.

Víctor Cuervo

Francisco

Excelente ejemplo ya lo probe y todo a la perfeccion pero tengo una pregunta, aqui en este ejemplo ya se ponen por defaul los valores de los productos pero como se pondria si tambien los valores fueran para ponerlos uno asi como la cantidad de los productos?

gracias y espero me ayudes en tu respuesta felicidades

Víctor Cuervo

t0nney

Para el que dice que se queda gabado el total simplemente borralo con un boton

Y una duda para el developer disculpa como puedo hacer para seleccionar de un solo las frutas que quiero y no necesariamente unas fijas Gracias

Víctor Cuervo

John

me parece bien el codigo pero como le hago cuando esta se obtiene desde una consulta sql

lo intente pero siempre me sale un error que dice NAN

Víctor Cuervo

PostelNet

Mofifique la funcion con estas 2 lineas para que sume y reste teniendo en cuenta los cambios que hacemos en la cantidad de unidades:

function calculo(cantidad,precio,inputtext,totaltext){

/* Parametros:
cantidad – entero con la cantidad
precio – entero con el precio
inputtotal – nombre del elemento del formulario donde ira el total
*/
// Guardo el subtotal viejo
subtotalviejo = inputtext.value;

// Calculo del subtotal
subtotal = precio*cantidad;
inputtext.value=subtotal;

//Actualizar el total
// Utilizamos el eval. Ya que el valor es un texto y si lo tratamos como tal
// es como si estuviesemos manipulando una cadena.
total = eval(totaltext.value);
total2 = total – subtotalviejo;
totaltext.value = total2 + subtotal;
}

Víctor Cuervo

Talamentes

Hola, amigo, me podrías ayudar a integrar esta función a wordpress?

Muchas gracias

Víctor Cuervo

Jpuga

Hola que tal, muy buen ejemplo, pero como se haria para ir sacando la suma total de las cantidades tbm, y que se actualize si es que modifico algun valor de cantidad, Muy amable

Víctor Cuervo

cesar

alguien tiene alguna idea sobre como crear otra funcion con un nuevo total por ejemplo total1 , para poder dividir sobre el total anterior y asi poder resolver la ecuacion anterior?
quedo atento a comentarios
saludos

Víctor Cuervo

cesar

perfecto, me resultó , bueno por ultimo estoy tratando de dividir el total (de la funcion que suma los subtotales) asi

{Total/[1-(costo3 + costo4)*(1+iva)]}+ gasto(1+iva) = Total1

el costo 3 , el costo 4 , el gasto y el iva, pueden ser los mismos valores que use para calcular el Total o pueden ser otros, por lo cual deben llevar inputtext para completar, dando como resultado un nuevo Total1

si me puedes orientar un poco por favor
y gracias por la orientacion anterior

Víctor Cuervo

lineadecodigo

@cesar,

A la pregunta de como puedes restar… Cada vez que hay un método onChange se llama a la función calculo(). Esto se hace desde todos los input. La función calculo, a parte de calcular el subtotal, también calcula el total.

function calculo(cantidad,precio,inputtext,totaltext){

totaltext.value = total + subtotal;
}

Lo que puedes hacer son dos funciones. Una que sea suma que sume el subtotal (como la actual de calculo) y otra que se llame resta, que reste el subtotal del total.

Luego, dependiendo del onChange llamar a una u otra.

Espero que te oriente un poco.

Víctor Cuervo

cesar

NO SE PUEDE PONER TODO EL CODIGO , BUENO LO TENGO EN
http://www.lawebdelprogramador.com/news/mostrar_new.php?id=45&texto=JavaScript&n1=569636&n2=0&n3=0&n4=0&n5=0&n6=0&n7=0&n8=0&n9=0&n0=0

QUIZAS RESPONDA A MUCHAS PREGUNTAS ANTERIORES SOBRE COMO CALCULAR IVA U OTRAS COSAS, PERO QUIEN PUEDA MEJORARLO BIENVENIDO, POR EJEMPLO QUE AL PRIMER SUBTOTAL SE LE RESTEN LOS SIGUIENTES SUBTOTALES EN VEZ DE ESTE EJEMPLO EN EL CUAL SE VAN SUMANDO Y POR ENDE SE ACTUALIZE EL TOTAL, QUEDO ATENTO A COMENTARIOS

Víctor Cuervo

cesar

hola , bueno tengo esta formula para calcular costos, pero quiero que al primer subtotal se le vallan restando los demas subtotales en vez de ir sumandose y por supuesto que el total se valla actualizando? alguna idea , les dejo el codigo
me pueden escribir a cesarquezadap@gmail.com para mas consultas. gracias

formula de costos

function calculo(cantidad,precio,inputtext,totaltext){

gndtotal= totaltext.value – inputtext.value ;

/* Parametros:
cantidad – entero con la cantidad
precio – entero con el precio
inputtotal – nombre del elemento del formulario donde ira el total
*/

// Calculo del subtotal
subtotal = (precio*cantidad);
inputtext.value= subtotal;
//

//Actualizar el total
// Utilizamos el eval. Ya que el valor es un texto y si lo tratamos como tal
// es como si estuviesemos manipulando una cadena.
total = eval(gndtotal);
totaltext.value= total + subtotal;
}

Compra de Frutas

Cantidad
Precio/Ud
Total

monto compra

costo 1

costo 2

gasto envio

iva

Total

Víctor Cuervo

cesar

quisiera saber como al primer subtotal que es de las manzanas se le puede ir restando los demas subtotales en vez de ir sumandose como es el actual caso a medida que se van agregando los valores en los input? gracias

Víctor Cuervo

audio rodriguez

y para calcular el iva al total general con este mismo ejemplo ???

Víctor Cuervo

Karol

Hola,
Me he hecho una plantilla de factura en acrobat reader 9 y he puesto todos los campos…pero me faltan 2 por hacer el calculo y me veo incapaz… en uno de ellos quiero que calcule el iva y me ponga el calculo en otra casilla y en el otro quiero que me calcule algún descuento… puede alquien ayudarme? …he pasado mucho trabajo hasta llegar hasta aquí y no me gustaría tener q tirar el trabajo…
Muchísimas gracias.

Víctor Cuervo

Oscar

Excelente codigo.

Para los que quieran actualizar la cantidad total en cuanto se modifica alguno de los textbox pueden agregar una resta en la funcion calculo
ejemplo:

function calculo(cantidad,precio,inputtext,totaltext){

gndtotal= totaltext.value-inputtext.value;

// Calculo del subtotal
subtotal = precio*cantidad;
inputtext.value=subtotal;

//Calculo del total
total = eval(gndtotal);
totaltext.value = total + subtotal;
}

Víctor Cuervo

MARIO CARRILLO

EL CODIGO FUNCIONA DE MARAVILLA PERO QUE PASA SI DECRMENTAS LA CANTIDAD DEL PRODUCTO ?? DEBERIA DECREMENTAR EL TOTAL GENERAL, POR LO QU EPIENSO QUE ESTE EJEMPLO NO ES TOTALMENTE UTIL PARA APLICARLO DE FORMA REAL. ME GUSTARIA UN EJEMPLO DONDE SE MANEJE UN ARREGLO DE CAJAS EN LA CUAL SE OBTENGA LA SUMATORIA PERO SI SE CAMBIA EL VALOR DE UNA DE ELLAS ESA SUMATORIA TOTAL SE DECREMENTE… GRACIAS

Víctor Cuervo

BRENDA LUNA

Hola, necesito saber quei nme puede ayudar necesito un codigo que al ponerle un codigo de aun articulo me ponga el precio y si en la cantidad le pongo que son 2 los que quieros de los miusmos multìplique el precio y me saque un total…

Necesito una tabal que tenga codigo de producto (si no existe que marque error) cantidad precios unitario y el subtotal y luego si pongo mas codigos difetes hace lo mismo y al final me da el total final…. quien sabe hacerlo… lo quiero para poner en una pagina web es un trabajo para una clase… yo se que para los que saben de esto es algo super sencillo
BRENDA LUNA
brendaenlaluna@gmail.com

Víctor Cuervo

karla

Hola alguien que me pueda ayudar necesito un programa que pida el precio de 3 articulos pero si el precio de cada articulo es mayor a 30pesos que me saque un iva del 15% y despues sume los tres y me de la cantidad total pero si cada articulo no arrevasa los 3o pesos solo los sume ha pero debe traer un do,for, if y while por fa me urgue.Ayudenme los recompensare con otros programas mi correo es che_cammel@hotmail.com

Víctor Cuervo

karla

Hola alguien que me pueda ayudar necesito un programa que pida el precio de 3 articulos pero si el precio de cada articulo es mayor a 30pesos que me saque un iva del 15% y despues sume los tres y me de la cantidad total pero si cada articulo no arrevasa los 3o pesos solo los sume ha pero debe traer un do,for, if y while por fa me urgue.Ayudenme los recompensare con otros programas

Víctor Cuervo

Marcelo Rodríguez Durán

Perfecto ejemplo que funciona a toda.
Ahora, se me ha ocurrido el siguiente caso:
1º Compro frutas, se toalizan y se muestra el total de frutas..
2º Compro verduras, se toalizan y se muestra el total de frutas..
3º Compro carnes, se toalizan y se muestra el total de frutas..
Hasta aca todo funciona perfecto.
entonces:
4º Como totalizar en un solo gran total los totales de frutas, verduras y carnes, mostrando todo?. La verdad no he sido capaz.
Atentamente; Novato 1000000.
Nos podría regalar el código?
Yo aporto el código completo de lo que ya tengo.

Víctor Cuervo

jack

encima no tienes protector contra spam
carajo dedicate a otra cosa
quien eres?
identificate?

Víctor Cuervo

jack

cuando colocaran codigo que realmente sirva el campo total no suma luego de modificaciones

Víctor Cuervo

nati

como seria esto mismo pero trayendo los datos desde una base de datos…?

graciasss!!

Víctor Cuervo

José Carlos

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.

Víctor Cuervo

jesus

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

Víctor Cuervo

Javier

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.

Víctor Cuervo

daniel

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?

Víctor Cuervo

Mariana

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 🙁

Víctor Cuervo

viviana

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…….

Víctor Cuervo

Yo

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.

Víctor Cuervo

Oxono

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?

Víctor Cuervo

lineadecodigo

Ya está solucionado. No se que ha podido pasar.
Si tienes cualquier otro problema no dudes en escribir.
Gracias por el mensaje.

Víctor Cuervo

Angel Luis

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!

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*

*