Sumar campos de tablas
Tengo que realizar una menú de restaurante con precios de platos y que el usuario pueda hacerse un presupuesto marcando con el ratón (checkbox) lo que vaya a consumir. Se trata de realizar una tabla y que luego mediante un botón sume las opciones o checkboxes que el usuario ha marcado. ¿Cómo lo podría hacer?
Respuesta de bmayorales
1
Pues es muy sencillo aunque yo lo haría con base de datos, asp, jsp o php, pero si lo vas a hacer con HTML y JS te recomiendo que pongas en el value de los check el precio de cada producto y que al clicar en el botón te hagas una función, que te recorra todos los checks averiguar cuales están clicados e ir sacando el value (precio del producto) de cada elemento y al final sumarlos todos, si lo que quieres es hacer que según vaya clicando se vaya sumando pues te metes la función en los check y cuando clicas averiguas si es true o false y si es true pues sumas al resultado su value.
Gracias. Te respondo.
El hecho de hacerlo en html y js es que los precios del menu son siempre fijos (bueno, variarán cada año) y queremos hacer algo sencillo sin bases de datos ni nada complicado. Lo que me has explicado me parece estupendo, pero como no soy programador... pues me suena algo a "chino" todo lo que me dices :-/. Si supieras de algún sitio donde pudiera ver resuelto en código lo que me dices, o tú mismo me lo pudieras plasmar, pues sería estupendo. Si no, pues ya hablaría con alguien para que me explique lo que me has recomendado. ¿Vale?
Bueno, muchas gracias por dedicar un rato de tu tiempo.
El hecho de hacerlo en html y js es que los precios del menu son siempre fijos (bueno, variarán cada año) y queremos hacer algo sencillo sin bases de datos ni nada complicado. Lo que me has explicado me parece estupendo, pero como no soy programador... pues me suena algo a "chino" todo lo que me dices :-/. Si supieras de algún sitio donde pudiera ver resuelto en código lo que me dices, o tú mismo me lo pudieras plasmar, pues sería estupendo. Si no, pues ya hablaría con alguien para que me explique lo que me has recomendado. ¿Vale?
Bueno, muchas gracias por dedicar un rato de tu tiempo.
Por que no me dices exactamente como quieres que te haga la página de javascript y te la monto, ¿me refiero a que a lo mejor quieres por ejemplo poner en opción de refrescos un campo de texto donde puedas poner un numero si quieres uno dos o tres o cosas así y si quieres me pasas lo que quieres y yo te hago la programación de todo ello...? Como lo veas... yo ahora mismo no tengo nada de trabajo y te lo puedo hacer si quieres...
Muchas gracias, la verdad es que eres un chollo de persona. Mira lo que quiero hacer lo puedes ver en:
http://www.dtpdigital.com/casaisabel/presupuestos.htm
Ahí te he puesto un formulario con unos campos checkbox a modo de ejemplo. No hace falta que hagas todos los checkbox, con que hagas un par o 3 para que yo vea cómo se hace en paz, porque una vez visto el código ya lo entiendo y puedo copiar y adaptarlo al resto.
No hace falta tampoco que vaya sumando a la vez que se van marcando los checkbox, no hagas refrescos, que solamente sume cuando le den al botón sumar.
Lo malo son los platos cuyos precios son por persona... pero en fin, ya veremos cómo lo apañamos.
Muchas gracias de nuevo y si vienes por valencia hablaré con el gerente para ver si te invita a algo en el restaurante! Un cordial saludo
http://www.dtpdigital.com/casaisabel/presupuestos.htm
Ahí te he puesto un formulario con unos campos checkbox a modo de ejemplo. No hace falta que hagas todos los checkbox, con que hagas un par o 3 para que yo vea cómo se hace en paz, porque una vez visto el código ya lo entiendo y puedo copiar y adaptarlo al resto.
No hace falta tampoco que vaya sumando a la vez que se van marcando los checkbox, no hagas refrescos, que solamente sume cuando le den al botón sumar.
Lo malo son los platos cuyos precios son por persona... pero en fin, ya veremos cómo lo apañamos.
Muchas gracias de nuevo y si vienes por valencia hablaré con el gerente para ver si te invita a algo en el restaurante! Un cordial saludo
Primerametne pedirte disculpas por mi tardanza es que ha sido fin de semana y he desaparecido y a continuación teenvio el código de una página que he hecho aplicando tu formulario:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<script>
function SumarTotal() {
var Total = 0;
for(i = 0; i < document.form.opCheck.length;i++) {
if (document.form.opCheck.checked)
Total = parseFloat(Total) + parseFloat(document.form.opCheck.value);
}
for (i = 0; i < document.form.opCheckPlato.length; i++)
{
if (document.form.opCheckPlato.checked)
{
var valorCheck = parseFloat(document.form.opCheckPlato.value);
var valorInput = parseInt(document.form.InputPersonas.value)
if(document.form.InputPersonas.value == "")
{
alert("El campo número de personas no es correcto")
document.form.InputPersonas.focus();
i = document.form.opCheckPlato.length;
Total = 0;
}
else
Total = Total + (parseFloat(valorCheck)*valorInput)
}
}
document.form.precioTotal.value = Total;
}
function comprobarCampo(paramValue) {
if(isNaN(paramValue.value)) {
alert("por favor en campo Nº de personas no es correcto");
paramValue.focus();
}
}
function activarCampo(paramObject) {
for (i = 0; i < document.form.opCheckPlato.length; i++) {
if (document.form.opCheckPlato.checked) {
document.form.InputPersonas.disabled = false;
if (document.form.InputPersonas.value == "")
document.form.InputPersonas.focus();
}
else {
document.form.InputPersonas.disabled = true;
document.form.InputPersonas.value = "";
}
}
}
</script>
<head>
</style>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="form">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="780"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="F7F7F0"><table width="780" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="56%" align="left" valign="top">
<p class="txt">Hágase un presupuesto de lo que quiere consumir. Si lo desea puede imprimirse esta página con el resultado y enseñarla en el restaurante para poder atenderle con mayor rapidez. </p>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="2" class="txt" id="bravas">
<tr>
<td width="5%" class="submenu"> </td>
<td width="63%" class="submenu">TAPAS</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="2.50">
</td>
<td>Bravas</td>
<td colspan="2">2.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="3">
</td>
<td>Esgarraet</td>
<td colspan="2">3.00 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="2.75">
</td>
<td>Calamares</td>
<td colspan="2">2.75 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4">
</td>
<td>Surtido de Ibéricos </td>
<td colspan="2">4.00 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.50">
</td>
<td>Jamón y queso </td>
<td colspan="2">4.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.50">
</td>
<td>Sepia a la plancha </td>
<td colspan="2">4.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.25">
</td>
<td>Sepia con mayonesa (frío) </td>
<td colspan="2">4.25 ? </td>
</tr>
<tr>
<td class="submenu"> </td>
<td class="submenu">PRIMER PLATO</td>
<td align="right"> </td>
<td align="left">Nº personas </td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5" onclick="activarCampo(this)">
</td>
<td>All i Pebre marinero </td>
<td width="17%">5.00 ? </td>
<td width="15%"><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5.20" onclick="activarCampo(this)">
</td>
<td>Paella marisco (precio por persona) </td>
<td>5.20 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="4.50" onclick="activarCampo(this)">
</td>
<td>Paella valenciana </td>
<td>4.50 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5.75" onclick="activarCampo(this)">
</td>
<td>Paella Bogavante </td>
<td>5.75 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td> </td>
<td align="right"><p> </p>
<p>
<input type="button" value="SUMAR" onClick="SumarTotal()">
</p></td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td align="right">TOTAL MENÚ </td>
<td colspan="2"><input name="textfield" id="precioTotal" type="text" value="" size="7" readonly>
</td>
</tr>
</table>
</form> </td>
</tr>
</table></td>
</tr>
</table></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
Te explico la función suma recorre todos los checks normales, osea los que no son de menu y que no necesita saber cuantas personas comerán, recorreo todos ellos y cuando hay alguno checkeado pues introduce su valor en la variable total, después recorre todos los checks que tienes de menu o que necesitan de comprobación de personas que lo tomaran y cuando hay uno checkeado pues multiplica su valor con la cantidad de personas que lo tomaran y lo introduce en Total, en este paso hace una comprobación para averiguar si en el campo personas hay algún valor introducido si no es así saca una ventana de aviso y manda el foco del cursor al campo para que lo rellene e iguala el Total a 0, y si el campo personas es correcto pues multiplica los valores y los introduce en el campo total. Después de todo esto mete la variable total en el campo del total.
Después como comprobaras hay dos funciones:
ComprobarCampo(); que se pone en el onBlur de los campos de texto de las personas que sirve para comprobar que el valor introducido es un valor numérico si no es así saca una ventana de aviso y manda el foco otra vez al campo en cuestión para que se rellene correctamente y no de errores
Y la otra función es:
ActivarCampo(); que se pone en el onclick de los checks de los platos, ¿para qué? Pues porque de primeras los campos de texto de los platos son disabled osea no se puede escribir sobre ellos salvo cuando se hace el click sobre su check en cuestión entonces al hacer click llamamos a esta función, activamos el campo de texto en cuestión y le mandamos el foco para que lo rellene, si lo que hacemos es deseleccionarlo lo que hace la función es vaciar el valor del campo de texto correspondiente y volverlo a hacer disabled.
Para terminar comentarte que el campo Total Menu tiene una propiedad que es readonly y que sirve para que nadie pueda escribir sobre el.
Decirte en ultimo lugar que estas funciones están implementadas para explorar no me he dedicado a implementarlas para todos los navegadores.
Y si tienes alguna duda más por favor coméntamela. Es un formulario muy completo espero que te sirva y si no entiendes algo pregunta que aquí estoy.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<script>
function SumarTotal() {
var Total = 0;
for(i = 0; i < document.form.opCheck.length;i++) {
if (document.form.opCheck.checked)
Total = parseFloat(Total) + parseFloat(document.form.opCheck.value);
}
for (i = 0; i < document.form.opCheckPlato.length; i++)
{
if (document.form.opCheckPlato.checked)
{
var valorCheck = parseFloat(document.form.opCheckPlato.value);
var valorInput = parseInt(document.form.InputPersonas.value)
if(document.form.InputPersonas.value == "")
{
alert("El campo número de personas no es correcto")
document.form.InputPersonas.focus();
i = document.form.opCheckPlato.length;
Total = 0;
}
else
Total = Total + (parseFloat(valorCheck)*valorInput)
}
}
document.form.precioTotal.value = Total;
}
function comprobarCampo(paramValue) {
if(isNaN(paramValue.value)) {
alert("por favor en campo Nº de personas no es correcto");
paramValue.focus();
}
}
function activarCampo(paramObject) {
for (i = 0; i < document.form.opCheckPlato.length; i++) {
if (document.form.opCheckPlato.checked) {
document.form.InputPersonas.disabled = false;
if (document.form.InputPersonas.value == "")
document.form.InputPersonas.focus();
}
else {
document.form.InputPersonas.disabled = true;
document.form.InputPersonas.value = "";
}
}
}
</script>
<head>
</style>
<link href="estilos.css" rel="stylesheet" type="text/css">
</head>
<body>
<form name="form">
<table width="100%" height="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
<td width="780"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td bgcolor="F7F7F0"><table width="780" border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="56%" align="left" valign="top">
<p class="txt">Hágase un presupuesto de lo que quiere consumir. Si lo desea puede imprimirse esta página con el resultado y enseñarla en el restaurante para poder atenderle con mayor rapidez. </p>
<form name="form1" method="post" action="">
<table width="100%" border="0" cellpadding="0" cellspacing="2" class="txt" id="bravas">
<tr>
<td width="5%" class="submenu"> </td>
<td width="63%" class="submenu">TAPAS</td>
<td colspan="2"> </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="2.50">
</td>
<td>Bravas</td>
<td colspan="2">2.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="3">
</td>
<td>Esgarraet</td>
<td colspan="2">3.00 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="2.75">
</td>
<td>Calamares</td>
<td colspan="2">2.75 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4">
</td>
<td>Surtido de Ibéricos </td>
<td colspan="2">4.00 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.50">
</td>
<td>Jamón y queso </td>
<td colspan="2">4.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.50">
</td>
<td>Sepia a la plancha </td>
<td colspan="2">4.50 ? </td>
</tr>
<tr>
<td>
<input name="opCheck" type="checkbox" id="opCheck" value="4.25">
</td>
<td>Sepia con mayonesa (frío) </td>
<td colspan="2">4.25 ? </td>
</tr>
<tr>
<td class="submenu"> </td>
<td class="submenu">PRIMER PLATO</td>
<td align="right"> </td>
<td align="left">Nº personas </td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5" onclick="activarCampo(this)">
</td>
<td>All i Pebre marinero </td>
<td width="17%">5.00 ? </td>
<td width="15%"><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5.20" onclick="activarCampo(this)">
</td>
<td>Paella marisco (precio por persona) </td>
<td>5.20 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="4.50" onclick="activarCampo(this)">
</td>
<td>Paella valenciana </td>
<td>4.50 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td>
<input name="opCheckPlato" type="checkbox" id="opCheckPlato" value="5.75" onclick="activarCampo(this)">
</td>
<td>Paella Bogavante </td>
<td>5.75 ? </td>
<td><input name="InputPersonas" id="InputPersonas" type="text" size="2" maxlength="3" disabled onBlur="comprobarCampo(this)"></td>
</tr>
<tr>
<td> </td>
<td align="right"><p> </p>
<p>
<input type="button" value="SUMAR" onClick="SumarTotal()">
</p></td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td align="right">TOTAL MENÚ </td>
<td colspan="2"><input name="textfield" id="precioTotal" type="text" value="" size="7" readonly>
</td>
</tr>
</table>
</form> </td>
</tr>
</table></td>
</tr>
</table></td>
<td> </td>
</tr>
</table></td>
</tr>
</table>
</form>
</body>
</html>
Te explico la función suma recorre todos los checks normales, osea los que no son de menu y que no necesita saber cuantas personas comerán, recorreo todos ellos y cuando hay alguno checkeado pues introduce su valor en la variable total, después recorre todos los checks que tienes de menu o que necesitan de comprobación de personas que lo tomaran y cuando hay uno checkeado pues multiplica su valor con la cantidad de personas que lo tomaran y lo introduce en Total, en este paso hace una comprobación para averiguar si en el campo personas hay algún valor introducido si no es así saca una ventana de aviso y manda el foco del cursor al campo para que lo rellene e iguala el Total a 0, y si el campo personas es correcto pues multiplica los valores y los introduce en el campo total. Después de todo esto mete la variable total en el campo del total.
Después como comprobaras hay dos funciones:
ComprobarCampo(); que se pone en el onBlur de los campos de texto de las personas que sirve para comprobar que el valor introducido es un valor numérico si no es así saca una ventana de aviso y manda el foco otra vez al campo en cuestión para que se rellene correctamente y no de errores
Y la otra función es:
ActivarCampo(); que se pone en el onclick de los checks de los platos, ¿para qué? Pues porque de primeras los campos de texto de los platos son disabled osea no se puede escribir sobre ellos salvo cuando se hace el click sobre su check en cuestión entonces al hacer click llamamos a esta función, activamos el campo de texto en cuestión y le mandamos el foco para que lo rellene, si lo que hacemos es deseleccionarlo lo que hace la función es vaciar el valor del campo de texto correspondiente y volverlo a hacer disabled.
Para terminar comentarte que el campo Total Menu tiene una propiedad que es readonly y que sirve para que nadie pueda escribir sobre el.
Decirte en ultimo lugar que estas funciones están implementadas para explorar no me he dedicado a implementarlas para todos los navegadores.
Y si tienes alguna duda más por favor coméntamela. Es un formulario muy completo espero que te sirva y si no entiendes algo pregunta que aquí estoy.
Perfecto! Muchas gracias, eres genial. No olvides pasar por aquí y te invitaremos a algo. Cuando tenga la web completa si quieres te enviaré la dirección para que sepas dónde estamos. Saludos.
1 respuesta más de otro experto
Respuesta de gandalf26
1
Es un formulario normal, donde tomas los valores de los checkbox y los sumas sin más. Por partes:
Crear un checkbox:
<input type="checkbox" id="uno" value="PRECIO_DEL_PLATO"> NOMBRE_DEL_PLATO
Donde lo que esta en mayúsculas, lo cambias por el nombre del plato y su precio.
El id del mismo los vas poniendo "dos", "tres", sucesivamente para todos los que pongas.
Acceder al valor checkeado:
function valorASumar(queCheck){
var check= document.getElementById(queCheck);
return check.checked?check.value:0;
}
Esto devuelve el precio del plato si esta chequeado y 0 si no. Se le llama como valorASumar("uno"), por ejemplo, te daría el precio del plato "uno" si estuviera seleccionado.
Hacer la suma:
function sumar(){
var total = 0;
total+=valorASumar("uno");
total+=valorASumar("dos");
total+=valorASumar("tres");
...
return total;
}
en total esta el precio total de los platos seleccionados.
Poner el precio en algun sitio, por ejemplo, en otro input, de texto:
<input type="text" id="precioTotal" value="">
function ponerValor(){
document.getElementById("precioTotal").value = sumar();
}
y para que se sume pones un boton:
<input type="button" value="Calcular Precio" onClick="ponerValor()">
Crear un checkbox:
<input type="checkbox" id="uno" value="PRECIO_DEL_PLATO"> NOMBRE_DEL_PLATO
Donde lo que esta en mayúsculas, lo cambias por el nombre del plato y su precio.
El id del mismo los vas poniendo "dos", "tres", sucesivamente para todos los que pongas.
Acceder al valor checkeado:
function valorASumar(queCheck){
var check= document.getElementById(queCheck);
return check.checked?check.value:0;
}
Esto devuelve el precio del plato si esta chequeado y 0 si no. Se le llama como valorASumar("uno"), por ejemplo, te daría el precio del plato "uno" si estuviera seleccionado.
Hacer la suma:
function sumar(){
var total = 0;
total+=valorASumar("uno");
total+=valorASumar("dos");
total+=valorASumar("tres");
...
return total;
}
en total esta el precio total de los platos seleccionados.
Poner el precio en algun sitio, por ejemplo, en otro input, de texto:
<input type="text" id="precioTotal" value="">
function ponerValor(){
document.getElementById("precioTotal").value = sumar();
}
y para que se sume pones un boton:
<input type="button" value="Calcular Precio" onClick="ponerValor()">
Perfecto! Ahora sí ha funcionado. Creo que era por la función. No te preocupes que cuando vengas por Valencia me avisas y hablo con el gerente para que te invite a algo. Eso está hecho! Muchas gracias.
Ante todo muchas gracias por el tiempo dedicado.
Mira, he estado aplicando tu solución pero al final me sale una suma muy rara. La página la tengo en :
http://www.dtpdigital.com/casaisabel/presupuestos.htm
¿Le podrías echar un vistazo a ver qué pasa? Muchas gracias gandalf.
Mira, he estado aplicando tu solución pero al final me sale una suma muy rara. La página la tengo en :
http://www.dtpdigital.com/casaisabel/presupuestos.htm
¿Le podrías echar un vistazo a ver qué pasa? Muchas gracias gandalf.
Lo que pasa es que por poner los valores con comas (2,50), en lugar de sumar lo que esta haciendo es concatenar...
Pon los valores de los checkbox con "." en lugar de ","-->
2,5 --> 2.5
Y por si acaso, pon la funcion asi:
function valorASumar(queCheck){
var check= document.getElementById(queCheck);
return check.checked?new Number(check.value):0;
}
Creo que así debería funcionar.
Ah! Espero una buena mesa por los servicios prestados ;D
Pon los valores de los checkbox con "." en lugar de ","-->
2,5 --> 2.5
Y por si acaso, pon la funcion asi:
function valorASumar(queCheck){
var check= document.getElementById(queCheck);
return check.checked?new Number(check.value):0;
}
Creo que así debería funcionar.
Ah! Espero una buena mesa por los servicios prestados ;D