Ver Mensaje Individual
  #1 (permalink)  
Antiguo 01/12/2011, 18:43
Fabih24
 
Fecha de Ingreso: mayo-2010
Mensajes: 66
Antigüedad: 13 años, 11 meses
Puntos: 2
Calcular valores mientras se escribe el formulario

Hola, a ver si pueden orientarme un poco...

Tengo esta tabla:




Necesito que cuando escribo en el campo...

..19:00 a 19:59... un número, me aparesca el costo. (ejemplo(costo) 10*20=200)
..20:00 a 20:59... un número, me aparesca el costo. (ejemplo(costo) 5*30=150)
.... y así sucesivamente...

pero que además en APARICIONES MENSUALES se vayan sumando las cantidades (siguiendo el ejemplo anterior: 5+10 = 15)

y en TOTAL la suma de todos los costos..

A medida que vaya cambiando el usuario los datos se vaya actualizando...

Logré hacer con AJAX que cuando escribo en un campo me aparece el costo(como se ve en la imagen)... pero no se porque usando AJAX no me deja usar 2 funciones a la vez en un evento para que me actualice mas de 1 capa (agregar apariciones mensuales y costo)...


Este es el código que utilice:

Formulario.html
Código PHP:
<form action="" name="formulario" method="post">
<
table align="center" cellspacing="10">
    <
tr align="center">
        <
td>HORARIOS REPRODUCCION</td>
        <
td>CANTIDAD DE SPOT POR DIA</td>
        <
td>COSTO</td>
    </
tr>
    <
tr align="center">
        <
td>De lunes a lunes x 4 semanas</td>
        <
td>Duraci&oacute;n de Spot30 segundos</td>
        <
td>&nbsp;</td>
    </
tr>  
    <
tr align="center">
        <
td>19:00 a 19:59</td>
        <
td><input type="text" name="cant" onChange="mostrar_calculo(document.formulario.cant.value,200);"/></td>
        <
td><div id='capa1'>0</div></td>
    </
tr>  
    <
tr align="center">
        <
td>20:00 a 20:59</td>
        <
td><input type="text" name="cant2" onChange="mostrar_calculo2(document.formulario.cant2.value,100);"/></td>
        <
td><div id='capa2'>0</div></td>
    </
tr
    <
tr align="center">
        <
td>21:00 a 21:59</td>
        <
td><input type="text" name="cant3" onChange="mostrar_calculo3(document.formulario.cant3.value,100);"/></td>
        <
td><div id='capa3'>0</div></td>
    </
tr>
    <
tr align="center">
        <
td>22:00 a 22:59</td>
        <
td><input type="text" name="cant4" onChange="mostrar_calculo4(document.formulario.cant4.value,100);"/></td>
        <
td><div id='capa4'>0</div></td>
    </
tr
    <
tr align="center">
        <
td>23:00 a 23:59</td>
        <
td><input type="text" name="cant5" onChange="mostrar_calculo5(document.formulario.cant5.value,100);"/></td>
        <
td><div id='capa5'>0</div></td>
    </
tr
    <
tr align="center">
        <
td>00:00 a 00:59</td>
        <
td><input type="text" name="cant6" onChange="mostrar_calculo6(document.formulario.cant6.value,100);"/>
        </
td>
        <
td><div id='capa6'>0</div></td>
    
    </
tr>
    <
tr
        <
td align="right" colspan="3">
        <
table cellspacing="10">
            <
tr align="center" >
                <
td bgcolor="#0066FF">APARICIONES MENSUALES</td>
                <
td bgcolor="#3399FF">TOTAL</td>
            </
tr>
            <
tr align="center">
                <
td><div id='capa7'>0</div></td>
                <
td>0</td>
            </
tr>       
        </
table>
        </
td>
    </
tr>                         
</
table>
</
form
ajax.js
Código PHP:
function mostrar_calculo(datos,valor){
        
        
divResultado document.getElementById('capa1');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)
}

function 
mostrar_calculo2(datos,valor){
        
        
divResultado document.getElementById('capa2');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)
}

function 
mostrar_calculo3(datos,valor){
        
        
divResultado document.getElementById('capa3');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)
}

function 
mostrar_calculo4(datos,valor){
        
        
divResultado document.getElementById('capa4');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)
}

function 
mostrar_calculo5(datos,valor){
        
        
divResultado document.getElementById('capa5');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)
}

function 
mostrar_calculo6(datos,valor){
        
        
divResultado document.getElementById('capa6');
        
ajax=objetoAjax();
        
ajax.open("GET""mostrar_calculo.php?vdato="+datos+"&vvalor="+valor);
        
ajax.onreadystatechange=function() {
                if (
ajax.readyState==4) {
                        
divResultado.innerHTML ajax.responseText
                
}
        }
        
ajax.send(null)

mostrar_calculo.php
Código PHP:
<?php
$dato 
$_GET['vdato'];
$valor $_GET['vvalor'];
echo 
$dato*$valor
?>