Sumar datos en automático al ingresarlos

placks73 · #1 (**permalink**) 02/09/2013, 10:35

Buen dia,

Tengo una tabla que contiene los dias de la semana y en ella se deben ingresar valores numéricos.

Requiero implementar un campo adicional al final donde me vaya mostrando automaticamente la suma total que voy digitando en cada dia.

El formulario esta en php y todo se almacena en una base de datos en mysql.

Aprecio su pronta ayuda

xSkArx · #2 (**permalink**) 02/09/2013, 10:44

Y el codigo?

placks73 · #3 (**permalink**) 02/09/2013, 12:19

Este es el formulario:

<html>
<<body>
<h1 ALIGN=center>HOJA DE TIEMPO SEMANAL</h1>

<form name="forma" action="pagina2.php" method="post">

<div align="center">
<table>
<TR>
<TD><b><label for="lempleado">Empleado:</label></b></TD>
<TD><select name="usuario">
<option value="1">Andrea Baracaldo</option>
<option value="2">Juan David Restrepo</option>
<option value="3">Desiree Gonzalez</option>
</select>
</TD>
</TR>

<TR>
<TD><b><label for="ldepartamento">Departamento:</label></b></TD>
<TD><select name="departamento">
<option value="1">Gerencia</option>
<option value="2">Contabilidad</option>
<option value="3">IT</option>
<option value="4">Ventas</option>
<option value="5">Proyectos</option>
<option value="6">Logistica</option>
<option value="7">Soporte</option>
</select>
</TD>
</TR>
</table>
</div>

<br><br><br>

<TABLE border="3" bordercolor="42BED7" style="background-color:3174D7" width="50%" cellpadding="3" cellspacing="3" ALIGN="center" id="tablaregistro">
<TR>
<TD WIDTH=p ALIGN=CENTER><b>PROYECTO / ACTIVIDAD</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>DIVISION</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>OCO</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>LUN</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>MAR</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>MIER</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>JUE</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>VIE</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>SAB</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>DOM</b></TD>
<TD WIDTH=p ALIGN=CENTER><b>TOTAL HORAS</b></TD>
</TR>

<TR>
<TD> <input type="text" size="50" name="actividad"> </TD>
<TD> <input type="text" size="10" name="division"> </TD>
<TD> <input type="text" size="8" name="oco"> </TD>
<TD> <input type="text" size="8" name="lunes" onblur="addval(this)"> </TD>
<TD> <input type="text" size="8" name="martes"> </TD>
<TD> <input type="text" size="8" name="miercoles"> </TD>
<TD> <input type="text" size="8" name="jueves"> </TD>
<TD> <input type="text" size="8" name="viernes"> </TD>
<TD> <input type="text" size="8" name="sabado"> </TD>
<TD> <input type="text" size="8" name="domingo"> </TD>
<TD> <input type="text" size="15" name="totalhoras"> </TD>
</TR>
</TABLE>

<br><br>
<input type="submit" value="Guardar">

</form>

<br><br><br><br><br><br><br><br>

</body>
</html>

Este es el codigo php:

<html>
<head>
<title>Registro Hoja de Tiempo</title>
</head>
<body>
<?php
$conexion=mysql_connect("localhost","root","")
or die("Problemas en la conexion");
mysql_select_db("hoja_tiempo",$conexion) or die("Problemas en la seleccion de la base de datos");
mysql_query("insert into hojas(usuario, departamento, actividad, division, oco, lunes, martes, miercoles, jueves, viernes, sabado, domingo) values
('$_REQUEST[usuario]','$_REQUEST[departamento]','$_REQUEST[actividad]','$_REQUEST[division]','$_REQUEST[oco]','$_REQUEST[lunes]','$_REQUEST[martes]','$_REQUEST[miercoles]','$_REQUEST[jueves]','$_REQUEST[viernes]','$_REQUEST[sabado]','$_REQUEST[domingo]')",

$conexion) or die("Problemas en el select".mysql_error());
mysql_close($conexion);

echo "El registro fue exitoso.";
?>
</body>
</html>

La idea es que en le formulario el campo total horas no sea para digitar sino que vaya mostrando el total de la suma de lo que se digita de lunes a domingo.

Gracias

vick90 · #4 (**permalink**) 02/09/2013, 16:57

con un evento onchange en los textbox de lunas a domingo

placks73 · #5 (**permalink**) 03/09/2013, 09:35

podrias darme un ejemplo practico de como lo podria implementar?

andinog · #6 (**permalink**) 03/09/2013, 09:46

Hola

a estos elementos les agregaria class = "diadesemana"

Código HTML:

Ver original<TD> <input  class="diadesemana" type="text" size="8" name="lunes" onblur="addval(this)"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="martes"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="miercoles"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="jueves"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="viernes"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="sabado"> </TD>
<TD> <input class="diadesemana" type="text" size="8" name="domingo"> </TD>

a este otro un id = "totalhoras"

Código HTML:

Ver original<input id="totalhoras" type="text" size="15" name="totalhoras">

agregaria referencia a la libreria jQuery (www.jquery.com)

y luego en el javascript:

Código Javascript:

Ver original<script>
$('.diadesemana').change(function(){
 
       var total = 0;
 
    $('.diadesemana').each(function(elemento){
          total += $(elemento).val();
    });
 
    $('#totalhoras').val(total);
 
});
</script>