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:
Junio 23, 2010 #
y para calcular el iva al total general con este mismo ejemplo ???
Septiembre 27, 2010 #
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
Septiembre 28, 2010 #
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
Septiembre 28, 2010 #
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
Septiembre 29, 2010 #
@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.
Septiembre 29, 2010 #
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
Septiembre 30, 2010 #
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
Noviembre 1, 2011 #
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
Marzo 16, 2012 #
Hola, amigo, me podrías ayudar a integrar esta función a wordpress?
Muchas gracias