Calcular valores mientras se escribe el formulario

[Fabih24]

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 Spot: 30 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; 
?>