Auto calculate in form

Please help me to modified this code so the form fields can be calculated automatically. At the moment the script use OnKeyDown or tab to add and subtract value.Is it possible that when a user enter a number, the total area is automatically change. I notice a lot of people use onChange javascript function..but i still couldnt get it...

Here is the code...

<HTML>
<HEAD>
<TITLE>::..:: Borang BE 2004  E-Kalkulator::..::</TITLE>

<script language="JavaScript" type="text/JavaScript">
<!--


function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}



function MM_validateForm() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
      fieldRef = val;
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) {
           p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' format e-mail sahaja.\n';
      } else if (test!='R') {
                num = parseFloat(val);
        if (isNaN(val) || val<0){
            fieldRef.value='';
            errors+=''+nm+' Nilai nombor positif sahaja.\n';
        }
        if (test.indexOf('inRange') != -1) {
          p=test.indexOf(':');
          min=test.substring(8,p);
          max=test.substring(p+1);          
          if (num<min || max<num){
               errors+=nm+' Nilai tidak melebihi RM '+max+'.\n';
               fieldRef.value='';
          }
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) {
      alert(' \n'+errors);
     
  }
  document.MM_returnValue = (errors == '');
}

function MM_validateForm2() { //v4.0
  var i,p,q,nm,test,num,min,max,errors='',args=MM_validateForm2.arguments;
  for (i=0; i<(args.length-2); i+=3) { test=args[i+2]; val=MM_findObj(args[i]);
      fieldRef = val;
    if (val) { nm=val.name; if ((val=val.value)!="") {
      if (test.indexOf('isEmail')!=-1) {
           p=val.indexOf('@');
        if (p<1 || p==(val.length-1)) errors+='- '+nm+' format e-mail sahaja.\n';
      } else if (test!='R') {
                num = parseFloat(val);
        if (isNaN(val) || val<0){
            fieldRef.value='';
            errors+=''+nm+' Nilai nombor positif sahaja.\n';
        }
        if (test.indexOf('inRange') != -1) {
          p=test.indexOf(':');
          min=test.substring(8,p);
          max=test.substring(p+1);          
          if (num<min || max<num){
               errors+=nm+' Nilai haruslah RM  '+max+'.\n';
               fieldRef.value='';
          }
    } } } else if (test.charAt(0) == 'R') errors += '- '+nm+' is required.\n'; }
  } if (errors) {
      alert(' \n'+errors);
     
  }
  document.MM_returnValue = (errors == '');
}








function KW_getVal(o){ //v1.2
      var retVal="0";if (o.type=="select-one")
      {retVal=(o.selectedIndex==-1)?0:o.options[o.selectedIndex].value;}
      else if (o.length>1){for (var i=0;i<o.length;i++) if (o[i].checked) retVal=o[i].value;
      } else if (o.type=="checkbox") {retVal=(o.checked)?o.value:0;} else {
      retVal=Number(o.value)}return parseFloat(retVal);
}

function KW_calcForm() { //v1.2
      var str="",a=KW_calcForm.arguments; for (var i=3;i<a.length;i++)
      str+=(a[i].indexOf("#")==-1)?a[i]:KW_getVal(MM_findObj(a[i].substring(1)));
      t=Math.round(a[1]*eval(str))/a[1];tS=t.toString();if(a[2]>0){tSp=tS.indexOf(".");
      if(tSp==-1)      tS+=".";tSp=tS.indexOf(".");while(tSp!=(tS.length-1-a[2])){tS+="0";
      tSp=tS.indexOf(".");}} MM_findObj(a[0]).value=tS;
}

function tmt_regExpValidator(f,re,eMsg,ru,r){
      var myErr="";var fv=MM_findObj(f).value;var rex=new RegExp(unescape(re));
      var t=eval(ru+rex.test(fv));if(r){if(fv.length<=0||!t){alert(unescape(eMsg));myErr+="eMsg";}}
      else if(fv.length>0&&!t){alert(unescape(eMsg));myErr+="eMsg";}document.MM_returnValue=(myErr=="");
}


function test()
     {
          C16 = document.getElementById("C16").value;
                    result = eval(C16);
          if(result < 0)
          {
               document.getElementById("C16").value = "0";
          }
          else
          {
               document.getElementById("C16").value = result;
          }
     }
      
      function test_d20()
     {
          D20 = document.getElementById("D20").value;
                    result = eval(D20);
          if(result < 0)
          {
               document.getElementById("D20").value = "0";
          }
          else
          {
               document.getElementById("D20").value = result;
          }
     }
      
       function test_e13()
     {
          e13 = document.getElementById("e13").value;
                    result = eval(e13);
          if(result < 0)
          {
               document.getElementById("e13").value = "0";
          }
          else
          {
               document.getElementById("e13").value = result;
          }
     }
      
       function test_e14()
     {
          e14 = document.getElementById("e14").value;
                    result = eval(e14);
          if(result < 0)
          {
               document.getElementById("e14").value = "0";
          }
          else
          {
               document.getElementById("e14").value = result;
          }
     }
      
        function test_e10()
     {
          e10 = document.getElementById("e10").value;
                    result = eval(e10);
          if(result < 0)
          {
               document.getElementById("e10").value = "0";
          }
          else
          {
               document.getElementById("e10").value = result;
          }
     }
      
      
       function auto()
     {      
          E1 = document.getElementById("E1").value;
          result = eval(E1);
             
              if ((result >=0) && (result <2500))
          {
              document.getElementById("E2a").value ="0";
          document.getElementById("E2b").value = "0";
              document.getElementById("E2a_pertama").value = "0";
              document.getElementById("E2b_baki").value = "0";
              document.getElementById("E2b_kadar").value = "0";
          }
             
              if((result >=2500) && (result <5000))
              {
          document.getElementById("E2a").value ="25";
              document.getElementById("E2b").value = (result-2500)*0.01;
              document.getElementById("E2a_pertama").value = "2500";
              document.getElementById("E2b_baki").value = (result-2500);
              document.getElementById("E2b_kadar").value = "1";
                                    
          }
             
              if((result >=5000) && (result<10000))
              {
          document.getElementById("E2a").value ="25";
              document.getElementById("E2b").value = (result-5000)*0.03;
              document.getElementById("E2a_pertama").value = "5000";
              document.getElementById("E2b_baki").value = (result-5000);
              document.getElementById("E2b_kadar").value = "3";                         
          }
               
             if((result >=10000) && (result<20000))
              {
          document.getElementById("E2a").value ="175";
              document.getElementById("E2b").value = (result-10000)*0.03;  
              document.getElementById("E2a_pertama").value = "10000";
              document.getElementById("E2b_baki").value = (result-10000);
              document.getElementById("E2b_kadar").value = "3";                       
          }
             
             if((result >=20000) && (result<35000))
              {
          document.getElementById("E2a").value ="475";
              document.getElementById("E2b").value = (result-20000)*0.07;
              document.getElementById("E2a_pertama").value = "20000";
              document.getElementById("E2b_baki").value = (result-20000);  
              document.getElementById("E2b_kadar").value = "7";                     
          }
             
             if((result >=35000) && (result<50000))
              {
          document.getElementById("E2a").value ="1525";
              document.getElementById("E2b").value = (result-35000)*0.13;  
              document.getElementById("E2a_pertama").value = "35000";
              document.getElementById("E2b_baki").value = (result-35000);
              document.getElementById("E2b_kadar").value = "13";                     
          }
             
              if((result >=50000) && (result<70000))
              {
          document.getElementById("E2a").value ="3475";
              document.getElementById("E2b").value = (result-50000)*0.19;
              document.getElementById("E2a_pertama").value = "50000";
              document.getElementById("E2b_baki").value = (result-50000);
              document.getElementById("E2b_kadar").value = "19";                       
          }
             
            if((result >=70000) && (result<100000))
              {
          document.getElementById("E2a").value ="7275";
              document.getElementById("E2b").value = (result-70000)*0.24;  
              document.getElementById("E2a_pertama").value = "70000";
              document.getElementById("E2b_baki").value = (result-70000);
              document.getElementById("E2b_kadar").value = "24";                     
          }
             
             if((result >=100000) && (result<150000))
              {
          document.getElementById("E2a").value ="14475";
              document.getElementById("E2b").value = (result-100000)*0.27;
              document.getElementById("E2a_pertama").value = "100000";
              document.getElementById("E2b_baki").value = (result-100000);
              document.getElementById("E2b_kadar").value = "27";                       
          }
             
             if((result >=150000) && (result<250000))
              {
          document.getElementById("E2a").value ="27975";
              document.getElementById("E2b").value = (result-150000)*0.27;    
              document.getElementById("E2a_pertama").value = "150000";      
              document.getElementById("E2b_baki").value = (result-150000);
              document.getElementById("E2b_kadar").value = "27";              
          }
             
             if((result >=250000))
              {
          document.getElementById("E2a").value ="54975";
              document.getElementById("E2b").value = (result-250000)*0.28;
              document.getElementById("E2a_pertama").value = "250000";
              document.getElementById("E2b_baki").value = (result-250000);
              document.getElementById("E2b_kadar").value = "28";                       
          }
             
             
      }
      
       function Rebat()
     {
                 
          E1 = document.getElementById("E1").value;
          result = eval(E1);
             
              if ((result <35000))
          {
              document.getElementById("E4").value ="350";
          }
             
              if ((result >=35000))
          {
              document.getElementById("E4").value ="0";
          }
       }
      
//-->
</script>
<link href="stail.css" rel="stylesheet" type="text/css">
<style type="text/css">
<!--
.style1 {font-weight: bold}
.style3 {font-family: Arial, Helvetica, sans-serif; }
.style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
body {
      background-image: url();
}
a:link {
      color: #FF0000;
}
a:visited {
      color: #FFFFFF;
}
a:hover {
      color: #0000FF;
}
a:active {
      color: #FF0000;
}
.style7 {color: #0000FF}
-->
</style>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</HEAD>

<BODY>
<FORM NAME="frmcal" method="post" action="calculator2.asp">
  <table width="80%" border="0" align="center">
    <tr>
      <td><div align="center">
      </div></td>
    </tr>
  </table>
    <TABLE align="center" width="80%" border="1" bordercolor="#AADDEC" cellspacing="1" cellpadding="2">
    <TR bgcolor="#FFFFFF">
      <TD width="64" height="20"><font class="sixth">&nbsp;C1&nbsp;</font> <b></b></TD>
      <TD width="752" height="20">&nbsp;</TD>
      <TD width="51" height="20">
        <div align="center"><b><font face="Tahoma" size="2"> C1</font></b></div>
      </TD>
      <TD width="84" height="20">
        <div align="right">
          <input onKeyDown="if(event.keyCode==13) event.keyCode=9;"  name="C1" class="fourth"
              onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
              onBlur="MM_validateForm('C1','','NisNum');tmt_regExpValidator('C1','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
        </div>
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD height="20"><font class="sixth">&nbsp;C2&nbsp;</font> <font face="Tahoma" size="2"></font></TD>
      <TD height="20">&nbsp;</TD>
      <TD height="20">
        <div align="center"><b><font face="Tahoma" size="2">C2 </font></b></div>
      </TD>
      <TD height="20">
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;"  name="C2" class="fourth"
            onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C2','','NisNum');tmt_regExpValidator('C2','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C3&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C3 </font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C3" class="fourth"
            onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C3','','NisNum');tmt_regExpValidator('C3','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C4&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C4 </font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C4" class="fourth"
            onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C4','','NisNum');tmt_regExpValidator('C4','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C5&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C5 </font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C5" class="fourth"
            onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C5','','NisNum');tmt_regExpValidator('C5','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C6&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C6 </font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C6" class="fourth"
            onchange="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C6','','NisNum');tmt_regExpValidator('C6','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#B6D5FA">
      <TD height="34" class="third"><font class="sixth">&nbsp;C7&nbsp;</font>
        <b></b></TD>
      <TD height="34" class="third"><b>C1+C2+C3+C4+C5+C6=C7</b></TD>
      <TD height="34" class="third">
        <div align="center"><b><font face="Tahoma" size="2">C7 </font></b></div>
      </TD>
      <TD height="34" class="third">
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="pendapatanagregat" type="text" class="fourth" id="pendapatanagregat"
            onBlur="KW_calcForm('pendapatanagregat',1,-1,'#C1','+','#C2','+','#C3','+','#C4','+','#C5','+','#C6');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue" size="12" maxlength="12" readonly="true">
      </TD>
    </TR>
    <TR bgcolor="#B6D5FA">
      <td bgcolor="#FFFFFF"><font face="Tahoma" size="1"><b></b></font></td>
      <TD height="21"  bgcolor="#FFFFFF" class="third"><b><font face="Tahoma" size="2">Minus</font></b></TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD height="36"><font class="sixth">&nbsp;C8&nbsp;</font> <b><font face="Tahoma" size="2"><br>
        </font></b></TD>
      <TD height="36">&nbsp;</TD>
      <TD height="36">
        <div align="center"><font face="Tahoma" size="2"><b>C8</b></font></div>
      </TD>
      <TD height="36">
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C8" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C8','','NisNum');tmt_regExpValidator('C8','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C9&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C9</b></font></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C9" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C9','','NisNum');tmt_regExpValidator('C9','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.%0D%0A','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C10&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C10</b></font></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C10" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C10','','NinRange0:20000');tmt_regExpValidator('C10','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.%0D%0A','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C11&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C11</b></font></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C11" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C11','','NisNum');tmt_regExpValidator('C11','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.%0D%0A','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C12&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C12</font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C12" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C12','','NinRange0:20000');tmt_regExpValidator('C12','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.%0D%0A','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C13&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C13</font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C13" class="fourth"
            onchange="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('pendapatanagregat','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue"
            onBlur="MM_validateForm('C13','','NisNum');tmt_regExpValidator('C13','%5B.,-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.%0D%0A','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#94C6F8">
      <TD bgcolor="#94C6F8" class="third"><font class="sixth">&nbsp;C14&nbsp;</font>
        <b></b></TD>
      <TD bgcolor="#94C6F8" class="third"><b>C8+C9+C10+C11+C12+C13=C14</b></TD>
      <TD class="third">
        <div align="center"><b><font face="Tahoma" size="2">C14</font></b></div>
      </TD>
      <TD class="third">
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C14" type="text" class="fourth"
            onBlur="KW_calcForm('C14',1,-1,'#C8','+','#C9','+','#C10','+','#C11','+','#C12','+','#C13');tmt_regExpValidator('C14','%5B,.-%5D','Sila%20periksa%20nilai%20yang%20anda%20telah%20masukkan%20tadi%20!!!','!','');return document.MM_returnValue" size=12 maxlength="12" readonly="true">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD class="fifth"><font class="sixth">&nbsp;C15&nbsp;</font> <b></b></TD>
      <TD class="fifth"><b></b></TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C15</font></b></div>
      </TD>
      <TD>
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C15" class="fourth"
            onBlur="MM_validateForm('C15','','NisNum');tmt_regExpValidator('C15','%5B,.-%5D','Nilai%20koma,titik%20dan%20negatif%20tidak%20dibenarkan.','!','');return document.MM_returnValue" size=12 maxlength="12">
      </TD>
    </TR>
    <TR bgcolor="#94C6F8">
      <TD class="third"><font class="sixth">&nbsp;C16&nbsp;</font> <b></b></TD>
      <TD class="third">C7-C14-C15=C16</TD>
      <TD class="third">
        <div align="center"><b><font face="Tahoma" size="2">C16</font></b></div>
      </TD>
      <TD class="third">
        <input onKeyDown="if(event.keyCode==13) event.keyCode=9;" name="C16" type="text" class="fourth"
            onBlur="KW_calcForm('C16',1,-1,'#pendapatanagregat','-','#C14','-','#C15');test('C16'); return document.getElementById" size=12 maxlength="12" readonly="true">
      </TD>
    </TR>
  </TABLE>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color=Gray size=1><br>
    </font> </div>
</FORM>

</BODY>

</HTML>
inzhagiAsked:
Who is Participating?
 
ellandrdCommented:
ok i recoded your form:

try this: does what you require only i coded it to add the values from fields c1 - c6 first, then add the values from c8 - c13 including the value of field c7. this total appears in field c14. then minus c7, c14,c15 and display in c16.

i also have recoded the validatation for user input so they can only enter number and not characters...


try this:

it has the layout/style as your 1 above...


<html>
<head>
     <title></title>
     <script>
     <!--
     function add() {
           var total= (
           (document.frmcal.c1.value*1) +
           (document.frmcal.c2.value*1) +
           (document.frmcal.c3.value*1) +
           (document.frmcal.c4.value*1) +
           (document.frmcal.c5.value*1) +
           (document.frmcal.c6.value*1)
           );
           document.frmcal.c7.value=total;
     }

     function add2() {
                  var total2= (
                  (document.frmcal.c7.value*1) +
                  (document.frmcal.c8.value*1) +
                  (document.frmcal.c9.value*1) +
                  (document.frmcal.c10.value*1) +
                  (document.frmcal.c11.value*1) +
                  (document.frmcal.c12.value*1) +
                  (document.frmcal.c13.value*1)
                  );
                  document.frmcal.c14.value=total2;
     }

     function minus() {
                         var total3= ((document.frmcal.c7.value*1) -(document.frmcal.c14.value*1));

                         var total4 = (total3 - document.frmcal.c15.value*1);

                         document.frmcal.c16.value=total4;
     }


      function RestrictUserInput(elem) {
          if (/[^\d]/g.test(elem.value))
                   elem.value = elem.value.replace(/[^\d]/g, '');
      }

     //-->
     </script>
     <style type="text/css">
       <!--
       .style1 {font-weight: bold}
       .style3 {font-family: Arial, Helvetica, sans-serif; }
       .style4 {font-family: Arial, Helvetica, sans-serif; font-weight: bold; }
       body {
            background-image: url();
       }
       a:link {
            color: #FF0000;
       }
       a:visited {
            color: #FFFFFF;
       }
       a:hover {
            color: #0000FF;
       }
       a:active {
            color: #FF0000;
       }
       .style7 {color: #0000FF}
       -->
</style>
</head>

<body>

<FORM NAME="frmcal" method="post" action="calculator2.asp">
  <table width="80%" border="0" align="center">
    <tr>
      <td><div align="center">
      </div></td>
    </tr>
  </table>
    <TABLE align="center" width="80%" border="1" bordercolor="#AADDEC" cellspacing="1" cellpadding="2">
    <TR bgcolor="#FFFFFF">
      <TD width="64" height="20"><font class="sixth">&nbsp;C1&nbsp;</font> <b></b></TD>
      <TD width="752" height="20">&nbsp;</TD>
      <TD width="51" height="20">
        <div align="center"><b><font face="Tahoma" size="2"> C1</font></b></div>
      </TD>
      <TD width="84" height="20">


        <input type="text" name="c1" size="5" onKeyUp="add();RestrictUserInput(this);" value="">



      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD height="20"><font class="sixth">&nbsp;C2&nbsp;</font> <font face="Tahoma" size="2"></font></TD>
      <TD height="20">&nbsp;</TD>
      <TD height="20">
        <div align="center"><b><font face="Tahoma" size="2">C2 </font></b></div>
      </TD>
      <TD height="20">


        <input type="text" name="c2" size="5" onKeyUp="add();RestrictUserInput(this);" value="">


        </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C3&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C3 </font></b></div>
      </TD>
      <TD>

      <input type="text" name="c3" size="5" onKeyUp="add();RestrictUserInput(this);" value="">

      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C4&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C4 </font></b></div>
      </TD>
      <TD>


     <input type="text" name="c4" size="5" onKeyUp="add();RestrictUserInput(this);" value="">


     </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C5&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C5 </font></b></div>
      </TD>
      <TD>

      <input type="text" name="c5" size="5" onKeyUp="add();RestrictUserInput(this);"value="">


      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C6&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C6 </font></b></div>
      </TD>
      <TD>

     <input type="text" name="c6" size="5" onKeyUp="add();RestrictUserInput(this);" value="">

     </TD>
    </TR>
    <TR bgcolor="#B6D5FA">
      <TD height="34" class="third"><font class="sixth">&nbsp;C7&nbsp;</font>
        <b></b></TD>
      <TD height="34" class="third"><b>C1+C2+C3+C4+C5+C6=C7</b></TD>
      <TD height="34" class="third">
        <div align="center"><b><font face="Tahoma" size="2">C7 </font></b></div>
      </TD>
      <TD height="34" class="third">

<input type="text" name="c7" size="5" value="">

    </TD>
    </TR>
    <TR bgcolor="#B6D5FA">
      <td bgcolor="#FFFFFF"><font face="Tahoma" size="1"><b></b></font></td>
      <TD height="21"  bgcolor="#FFFFFF" class="third"><b><font face="Tahoma" size="2">Minus</font></b></TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD height="36"><font class="sixth">&nbsp;C8&nbsp;</font> <b><font face="Tahoma" size="2"><br>
        </font></b></TD>
      <TD height="36">&nbsp;</TD>
      <TD height="36">
        <div align="center"><font face="Tahoma" size="2"><b>C8</b></font></div>
      </TD>
      <TD height="36">


       <input type="text" name="c8" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">

       </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C9&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C9</b></font></div>
      </TD>
      <TD>


        <input type="text" name="c9" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">


        </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C10&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C10</b></font></div>
      </TD>
      <TD>

        <input type="text" name="c10" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">
      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C11&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><font face="Tahoma" size="2"><b>C11</b></font></div>
      </TD>
      <TD>


       <input type="text" name="c11" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">

       </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C12&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C12</font></b></div>
      </TD>
      <TD>


       <input type="text" name="c12" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">

       </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD><font class="sixth">&nbsp;C13&nbsp;</font> <b></b></TD>
      <TD>&nbsp;</TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C13</font></b></div>
      </TD>
      <TD>

       <input type="text" name="c13" size="5" onKeyUp="add2();RestrictUserInput(this);" value="">

       </TD>
    </TR>
    <TR bgcolor="#94C6F8">
      <TD bgcolor="#94C6F8" class="third"><font class="sixth">&nbsp;C14&nbsp;</font>
        <b></b></TD>
      <TD bgcolor="#94C6F8" class="third"><b>C8+C9+C10+C11+C12+C13=C14</b></TD>
      <TD class="third">
        <div align="center"><b><font face="Tahoma" size="2">C14</font></b></div>
      </TD>
      <TD class="third">


      <input type="text" name="c14" size="5" value="">

      </TD>
    </TR>
    <TR bgcolor="#FFFFFF">
      <TD class="fifth"><font class="sixth">&nbsp;C15&nbsp;</font> <b></b></TD>
      <TD class="fifth"><b></b></TD>
      <TD>
        <div align="center"><b><font face="Tahoma" size="2">C15</font></b></div>
      </TD>
      <TD>

     <input type="text" name="c15" size="5" onkeyUp="minus();RestrictUserInput(this);" value="">


     </TD>
    </TR>
    <TR bgcolor="#94C6F8">
      <TD class="third"><font class="sixth">&nbsp;C16&nbsp;</font> <b></b></TD>
      <TD class="third">C7-C14-C15=C16</TD>
      <TD class="third">
        <div align="center"><b><font face="Tahoma" size="2">C16</font></b></div>
      </TD>
      <TD class="third">


      <input type="text" name="c16" size="5" value="">

      </TD>
    </TR>
  </TABLE>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <div align="center"><font face="Verdana, Arial, Helvetica, sans-serif" color=Gray size=1><br>
    </font> </div>
</FORM>


</body>
</html>

all this for 40 points!

Ellandrd
 
0
 
ZvonkoSystems architectCommented:
Hello,
my proposal would be to create a general reCalculation() script. That script would compute all totals at every field blur or even at every keyup event in the input fields.
To check the actual field where the blur or keyup event occured you can pass the "this" reference to the reCalculation(theField) function.
That field reference can be used to get also the form reference for referencing the other input fields.
I prefer referencing field elements trough the form and not trough getElementByid().

That all is a major redesign of your page. What do you think about it?

0
 
inzhagiAuthor Commented:
I think its ok...can u try?
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
ZvonkoSystems architectCommented:
I need not to try; I know how it works. You need to try and post questions if something is not going as you expect.
0
 
ellandrdCommented:
look at this example:

<html>
<head>
     <title></title>
     <script>
     function add() {
     var total= ((document.addForm.num1.value*1) + (document.addForm.num2.value*1));
     document.addForm.total.value=total;
     }
     </script>
</head>

<body>
<form name="addForm">
<input type="text" name="num1" size="5" onKeyUp="add();" value=""><br>
<input type="text" name="num2" size="5" onKeyUp="add();" value=""><br>
<input type="text" name="total" size="5" value="">
</form>
</body>
</html>
0
 
ellandrdCommented:
you really dont need all the large code to add your values as you can see in my example...
0
 
ellandrdCommented:
what is it your trying to do:

add totals and after each time a user enters a number validate it?

explain what your doing in minis part of the form

Ellandrd  
0
 
ellandrdCommented:
only way your going to learn javascript is try do it yourself, but if you explain what i asked above, i'll help you out in any way i can
0
 
ellandrdCommented:
did you try my example?

Ellandrd
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.