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?

2 respuestas

Respuesta
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.
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
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.
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.
Respuesta
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()">
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.
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

Añade tu respuesta

Haz clic para o

Más respuestas relacionadas

Comprobar checkboxes

Tengo una página donde hay varios valores entre ellos unas variables y unos checkbox con los nombres(check1, check2, check3, etc.). Necesito hacer una función donde se comprueben que checkbox de la página están en "true" y me sume los valores de esos...
1 respuesta

Sumar y multiplicar id

Una vez me ayudaste a sumar campos con id y fue todo bien. Ahora quisiera multiplicar id y luego sumar totales. Me pasaste esta función: <script language="JavaScript" type="text/JavaScript"> <!-- function valorASumar(queCheck){ var check=...
1 respuesta

Suma aleatoria de array

Disculpe una pregunta como le puede hacer para que el array para sumar que me construyo me sume valores aleatoriamenta por ejemplo si meto valores de la posición 0 a la 6 y de la 7 a la 10 dejo en blanco y después en la posición 11 meto otro valor se...
1 respuesta

Sumar o restar dependiendo de checkbox

Espero me puedas ayudar en lo siguiente : Tengo un form, en donde quiero hacer lo siguiente: Tengo 2 campos de texto en donde se ingresan valores... Ahora, tengo 2 checkbox.. Uno dice "suma", el otro "resta".. Lo que quiero hacer, es tener ahora 2...
1 respuesta

Access, casillas de verificación y valor asociado

En un formulario Access tengo varias casillas de verificación para matricularse de varios temas de un curso. Cada tema tiene un valor diferente (0,00€). No sé mucho de programación pero creo que se debe poder sumar en un cuadro de texto el valor de...
2 respuestas

Php formulario

Estoy intentando realizar un "proyecto" de una web ficticia sobre una tienda de música. Tengo un menú desplegable ya creado y una base de datos con los siguientes campos: Categoría, artista, disco, precio, fecha. Explico lo que queri conseguir con un...
6 respuestas

Validar checkbox dinámicos

Te pido tu ayuda... El problema es que quiero activar varios check(hijo) dependiendo del estado de otro check(padre)... Estos check los genera php según la base de datos.. En tipo visual que así. [] --> Casilla. [] Modulo 1 []A []B []C [] Modulo 2...
1 respuesta

Switch Case en Java Script

Espero que se encuentre muy bien saludos El motivo por el cual le escribo es porque tengo una función que suma totales, el problema que tengo es que si por ejemplo solo quiero sumar los totales que capture en por text y no en todos no me lo hace, la...
2 respuestas

Leer datos

Estoy ingresando al mundo de html/javascript y estaba haciendo una pequeña aplicación y la situación es: tengo ua tabla la cual recupera datos de una BD (usando rs), cada fila recuparada tiene un checkbox, ahora lo que quiero es dependiendo si está...
1 respuesta

Java scipt sumar variables

Quiero insertar datos numéricos a una base de datos para ello intento la suma de sub totales la cual sera el gran total... Sin embargo no allo como sumar estos subtotales del formulario sin mandar los datos a la base de datos o a otra ubicación (php...
1 respuesta