?
Solved

Auto calculate in form

Posted on 2005-04-07
9
Medium Priority
?
495 Views
Last Modified: 2013-12-03
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>
0
Comment
Question by:inzhagi
  • 6
  • 2
9 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 13733452
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
 

Author Comment

by:inzhagi
ID: 13733830
I think its ok...can u try?
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 13734597
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 16

Expert Comment

by:ellandrd
ID: 13735100
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
 
LVL 16

Expert Comment

by:ellandrd
ID: 13735107
you really dont need all the large code to add your values as you can see in my example...
0
 
LVL 16

Expert Comment

by:ellandrd
ID: 13735208
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
 
LVL 16

Expert Comment

by:ellandrd
ID: 13735238
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
 
LVL 16

Accepted Solution

by:
ellandrd earned 160 total points
ID: 13736075
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
 
LVL 16

Expert Comment

by:ellandrd
ID: 13738571
did you try my example?

Ellandrd
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
Excel styles will make formatting consistent and let you apply and change formatting faster. In this tutorial, you'll learn how to use Excel's built-in styles, how to modify styles, and how to create your own. You'll also learn how to use your custo…
If you’ve ever visited a web page and noticed a cool font that you really liked the look of, but couldn’t figure out which font it was so that you could use it for your own work, then this video is for you! In this Micro Tutorial, you'll learn yo…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question