Multiple Row Auto Calculation and CheckBox

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Hi...guys!I have a multiple row table,the structure as declared below.

Code:

<table id ="claim_dtl">
<form name="claim_dtl">
<tr>
<td><input name="trainingCost" rel="calculate_input" type="text" size="5" /></td>
 <td ><input name="travelCost" rel="calculate_input" type="text" size="7" /></td>
<td ><input name="entCost" rel="calculate_input" type="text" size="5" /></td>
  <td><input name="miscCost" rel="calculate_input" type="text" size="5" /></td>
<td><input type="checkbox" name="fc" value="checkbox" /></td>
<td><input name="subTotalRM" rel="calculate_output_rm" type="text" size="5" disabled="disabled" /></td>
<td><input name="subTotalFC" rel="calculate_output_fc" type="text" size="10" disabled="disabled" /></td> 
 </tr>
<tr>
<td><input name="trainingCost" rel="calculate_input" type="text" size="5" /></td>
 <td ><input name="travelCost" rel="calculate_input" type="text" size="7" /></td>
<td ><input name="entCost" rel="calculate_input" type="text" size="5" /></td>
  <td><input name="miscCost" rel="calculate_input" type="text" size="5" /></td>
<td><input type="checkbox" name="fc" value="checkbox" /></td>
<td><input name="subTotalRM" rel="calculate_output_rm" type="text" size="5" disabled="disabled" /></td>
<td><input name="subTotalFC" rel="calculate_output_fc" type="text" size="10" disabled="disabled" /></td> 
 </tr>
<tr>
 <td><input name="totalRM" id ="totalRM" type="text" size="5" disabled="disabled" /></td>
<td><input name="totalFC" id ="totalFC" type="text" size="10" disabled="disabled" /></td>
</tr>
</form>
</table>

I need the summation of "calculate_input" to be displayed at the subTotalFC field if checkbox is checked rather than subTotalRM field which I have already implemented it.And also the summation of subTotalFC to be displayed at totalFC field.

Here is the function for auto calculation:

Code:

function setupAutoCalc() {
   var table = document.getElementById("claim_dtl");
    if(!table) {  
      alert("Error:No table found!");
        return;
    }
    if(table.tBodies.length == 0) {
      alert("Error:No row found!");
        return;
    }            
                
   for(var i = 0; i < table.tBodies[0].rows.length; i++) {
      var inputs = table.tBodies[0].rows[i].getElementsByTagName("input");
      for(var inp = 0; inp < inputs.length; inp++) {
         if(inputs[inp].getAttribute("rel") == "calculate_input") {
            inputs[inp].onkeyup = function() {
               var tmp = this;
               while(tmp.nodeName != "TR")
                  tmp = tmp.parentNode;
               autocalc(tmp, this);
            }
         }
      }
   }
}

function autocalc(row, v) {
   if(isNaN(v.value)) {
      alert("Please enter number only");
      v.value = "";
      return;
   }
else
    if(v.value == 0) {
      alert("Please enter number greater than zero only");
      v.value = "";
      return;
    }
   // if(document.claim_dtl.fc.checked == false) {
      var tmp= row.getElementsByTagName("input");
      var inputs = new Array();
      var output = false;
   
      for(var i = 0;i<tmp.length;i++) {
         if(tmp[i].getAttribute("rel") == "calculate_output_rm") 
            output = tmp[i];
         else
            inputs[inputs.length] = tmp[i];
       }
       if(!output) {
         alert("Error:No output calculated");
         return;
       }

      var subTotal = 0;
      for(var i = 0;i < inputs.length; i++) {
         var val = Number(inputs[i].value);
         var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
         if(!isNaN(num))
            subTotal += num; 
        }
        output.value = subTotal; // subtotal of RM

        tmp = row.parentNode.getElementsByTagName("input");
        var total = 0;
      for (var i = 0; i < tmp.length; i++) {
         if (tmp[i].getAttribute("rel") === "calculate_output_rm") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
             if(!isNaN(num)) {
                       total += num; 
               }
           }
       }
       var totalRM = document.getElementById("totalRM");
      totalRM.value = total; // total of RM
    // }

   if(document.claim_dtl.fc.checked == true) {
       tmp= row.getElementsByTagName("input");
   
       for(var i = 0;i<tmp.length;i++) {
         if(tmp[i].getAttribute("rel") == "calculate_output_fc") 
            output = tmp[i];
           else
            inputs[inputs.length] = tmp[i];
      }
      if(!output) {
         alert("Error:No output calculated");
         return;
       }

       subTotal = 0;
       for(var i = 0;i < inputs.length; i++) {
         var val = Number(inputs[i].value);
         var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
         if(!isNaN(num))
            subTotal += num; 
      }
      output.value = subTotal; // subtotal of FC

     tmp = row.parentNode.getElementsByTagName("input");
          total = 0;
      for (var i = 0; i < tmp.length; i++) {
         if (tmp[i].getAttribute("rel") === "calculate_output_fc") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
             if(!isNaN(num)) {
                       total += num; 
               }
           }
       }
       var totalFC = document.getElementById("totalFC");
      totalFC.value = total; // total of FC
    }
}

Why the condition if(document.claim_dtl.fc.checked == true) is not worked?This is the logic that I use to control the assignment of subtotal and total to the correct field.Thank for your pleasure help...

rangana · **Posted:** Sat May 24, 2008 5:25 am

How is setupAutoCalc and AutoCalc function being triggered by the way?..

We need to know as to reproduce the problem

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

setupAutoCalc is triggered by onload event.
<body onload = "setupAutoCalc ()">
Any idea?

rangana · **Posted:** Sat May 24, 2008 6:59 am

First, it's not working because your checkbox uses the same name, the if statement never gets executed since the statement itself is erroneous

You should have this code before your pointer if statement:

Code:

document.claim_dtl.fc[0].onclick=function()
{
// Your codes here
}

....and BTW, since you are using the onclick attribute of the checkbox, you can also change this part:

Code:

if(document.claim_dtl.fc.checked == true)

to:

Code:

if(this.checked == true)

Hope that helps

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Thank for reply. :wink:

Do you mean I should edit it in this way? Any part is wrong?The problem is still remain..

Code:

function autocalc(row, v) {
    if(isNaN(v.value)) {
        alert("Please enter number only");
        v.value = "";
        return;
    } else if(v.value == 0) {
        alert("Please enter number greater than zero only");
        v.value = "";
        return;
    }
    //if(checkbox == null || checkbox.checked == false) {
        var tmp = row.getElementsByTagName("input");
        var inputs = new Array();
        var output = false;
        // var checkbox = null;
   
        for(var i = 0;i<tmp.length;i++) {
            //if(tmp[i].getAttribute('type') == 'checkbox')
                //checkbox = tmp[i];
            //else {
                if(tmp[i].getAttribute("rel") == "calculate_output_rm")
                    output = tmp[i];
                else
                    inputs[inputs.length] = tmp[i];
            // }
       }
       if(!output) {
            alert("Error:No output calculated");
            return;
       }
 
        var subTotal = 0;
        for(var i = 0;i < inputs.length; i++) {
            var val = Number(inputs[i].value);
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
            if(!isNaN(num))
                subTotal += num;
        }
        output.value = subTotal; // subtotal of RM
 
        tmp = row.parentNode.getElementsByTagName("input");
        var total = 0;
        for (var i = 0; i < tmp.length; i++) {
            if (tmp[i].getAttribute("rel") === "calculate_output_rm") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
                if(!isNaN(num)) {
                       total += num;
               }
           }
       }
       var totalRM = document.getElementById("totalRM");
       totalRM.value = total; // total of RM
    // }
 
    document.claim_dtl.fc[0].onclick=function() {
    if(this.checked == true) {
         tmp= row.getElementsByTagName("input");
   
         for(var i = 0;i<tmp.length;i++) {
            if(tmp[i].getAttribute("rel") == "calculate_output_fc")
                output = tmp[i];
           else
                inputs[inputs.length] = tmp[i];
       }
       if(!output) {
            alert("Error:No output calculated");
            return;
       }
 
       subTotal = 0;
       for(var i = 0;i < inputs.length; i++) {
            var val = Number(inputs[i].value);
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
            if(!isNaN(num))
                subTotal += num;
      }
      output.value = subTotal; // subtotal of FC
 
     tmp = row.parentNode.getElementsByTagName("input");
          total = 0;
        for (var i = 0; i < tmp.length; i++) {
            if (tmp[i].getAttribute("rel") === "calculate_output_fc") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
                if(!isNaN(num)) {
                       total += num;
               }
           }
       }
       var totalFC = document.getElementById("totalFC");
       totalFC.value = total; // total of FC
    }
  }   
}

rangana · **Posted:** Sat May 24, 2008 7:54 am

You mean this:

Code:

<script type="text/javascript">
function setupAutoCalc() { 
   var table = document.getElementById("claim_dtl"); 
    if(!table) {  
      alert("Error:No table found!"); 
        return; 
    } 
    if(table.tBodies.length == 0) { 
      alert("Error:No row found!"); 
        return; 
    }            
                
   for(var i = 0; i < table.tBodies[0].rows.length; i++) { 
      var inputs = table.tBodies[0].rows[i].getElementsByTagName("input"); 
      for(var inp = 0; inp < inputs.length; inp++) { 
         if(inputs[inp].getAttribute("rel") == "calculate_input") { 
            inputs[inp].onkeyup = function() { 
               var tmp = this; 
               while(tmp.nodeName != "TR") 
                  tmp = tmp.parentNode; 
               autocalc(tmp, this); 
            } 
         } 
      } 
   } 
} 
function autocalc(row, v) { 
    if(isNaN(v.value)) { 
        alert("Please enter number only"); 
        v.value = ""; 
        return; 
    } else if(v.value == 0) { 
        alert("Please enter number greater than zero only"); 
        v.value = ""; 
        return; 
    } 
    //if(checkbox == null || checkbox.checked == false) { 
        var tmp = row.getElementsByTagName("input"); 
        var inputs = new Array(); 
        var output = false; 
        // var checkbox = null; 
    
        for(var i = 0;i<tmp.length;i++) { 
            //if(tmp[i].getAttribute('type') == 'checkbox') 
                //checkbox = tmp[i]; 
            //else { 
                if(tmp[i].getAttribute("rel") == "calculate_output_rm") 
                    output = tmp[i]; 
                else 
                    inputs[inputs.length] = tmp[i]; 
            // } 
       } 
       if(!output) { 
            alert("Error:No output calculated"); 
            return; 
       } 
  
        var subTotal = 0; 
        for(var i = 0;i < inputs.length; i++) { 
            var val = Number(inputs[i].value); 
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2); 
            if(!isNaN(num)) 
                subTotal += num; 
        } 
        output.value = subTotal; // subtotal of RM 
  
        tmp = row.parentNode.getElementsByTagName("input"); 
        var total = 0; 
        for (var i = 0; i < tmp.length; i++) { 
            if (tmp[i].getAttribute("rel") === "calculate_output_rm") { 
                var val = Number(tmp[i].value); 
                var num = Math.round(val * 100) / 100; 
                if(!isNaN(num)) { 
                       total += num; 
               } 
           } 
       } 
       var totalRM = document.getElementById("totalRM"); 
       totalRM.value = total; // total of RM 
    // } 
  
    document.claim_dtl.fc[0].onclick=function() { 
    if(this.checked == true) { 
         tmp= row.getElementsByTagName("input"); 
    
         for(var i = 0;i<tmp.length;i++) { 
            if(tmp[i].getAttribute("rel") == "calculate_output_fc") 
                output = tmp[i]; 
           else 
                inputs[inputs.length] = tmp[i]; 
       } 
       if(!output) { 
            alert("Error:No output calculated"); 
            return; 
       } 
  
       subTotal = 0; 
       for(var i = 0;i < inputs.length; i++) { 
            var val = Number(inputs[i].value); 
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2); 
            if(!isNaN(num)) 
                subTotal += num; 
      } 
      document.claim_dtl.subTotalFC[0].value = subTotal; // subtotal of FC 
  
     tmp = row.parentNode.getElementsByTagName("input"); 
          total = 0; 
        for (var i = 0; i < tmp.length; i++) { 
            if (tmp[i].getAttribute("rel") === "calculate_output_fc") { 
                var val = Number(tmp[i].value); 
                var num = Math.round(val * 100) / 100; 
                if(!isNaN(num)) { 
                       total += num; 
               } 
           } 
       } 
       var totalFC = document.getElementById("totalFC"); 
       totalFC.value = total; // total of FC 
    } 
  }    
} 
</script>

...Honestly, i'm confuse with your codes. Seems you've had a good foundation of JS. It confused me cause your doing the comparison on the rel attribute

Any special reason...I'm hesitant to do further ammendments since I'm confused.

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Sorry for causing your confused.I am just a learner of JS

The usage of rel pproperty here is to bind all possible fields that going to produce the output in multiple row.However,after adding checkbox,the comparison become malfuctioned(still stick to the case without checkbox).Feel free to do any further amendments on the codes to have better logic.

rangana · **Posted:** Sat May 24, 2008 9:50 am

Before I made further changes, could you explain what those inputs (must do)

So far, I understand, they're adding...then the next textbox are multiplying...That also confused me.

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Well.I will explain the entire logic to you to avoid any crash in the future.

Basically,it can be divided into three different parts.Only the third part involve multiplication.

(1.) For each row,there have four text fields to let user key in the input for adding. If "fc" checkbox is not checked, "subTotalRM" text field will display the subtotal of each row.if it is checked,the summation goes to "subTotalFC" text field.

Code:

 <td><input name="trainingCost" rel="calculate_input" type="text" size="5" /></td>
<td><input name="travelCost" rel="calculate_input" type="text" size="7"  /></td>
<td><input name="entCost" rel="calculate_input" type="text" size="5"  /></td>
<td><input name="miscCost" rel="calculate_input" type="text" size="5"  /></td>
<td><input type="checkbox" name="fc" value="checkbox" /></td>
<td ><input name="subTotalRM" rel="calculate_output_rm" type="text" size="5" disabled="disabled" /></td>
<td><input name="subTotalFC" rel="calculate_output_fc" type="text" size="10" disabled="disabled" /></td>

(2.)When subtotal of each row is being calculated,the script will have to summing each of the subtotal at the same.So, "totalRM" display summation of "subTotalRM" at each row;"totalFC" display summation of "subTotalFC".

Code:

<tr>
<td colspan="10" align="right">Total:&nbsp;</td>
<td><input name="totalRM" id ="totalRM" type="text" size="5" disabled="disabled" /></td>
<td><input name="totalFC" type="text" size="10" disabled="disabled" /></td>
 </tr>

(3.) The "totalFC" is the total of foreign currency which need to convert it to domestic currency by entering an exchange rate at "excrate" field."fcname" is just a field that let user enter the abbreviation of foreign currency,for instance,USD. "fcvalue" is the field that should display the same value as "totalFC" concurrently when adding those "subTotalFC".

After exchange rate is entered,the "grantotal" field should display the foreign currecny that being converted(by multiplication) to domestic currency (RM) and adding "totalRM" if that field is not empty since user may have entered multiple records which mixed in between domestic currency and foreign currency.

Code:

<tr>
<td colspan="8" align="right"><b>Exchange Rate @</b></td>
<td colspan="2" align="right"><input name="excrate" type="text"  size="10" />&nbsp;</td>
<td align="center" >N/A</td>
<td ><input name="fcname" type="text" size="2" />
<input name="fcvalue" type="text" size="5" disabled="disabled" /></td>
</tr>

<tr>
<td colspan="10" align="right" <b>Grand Total: </b></td>
<td colspan="2"><input name="rm" disabled="disabled" type="text" value="RM" size="2" />
<input name="grantotal" disabled="disabled" type="text" size="10" />
</td>
</tr>
 </tr>

rangana · **Posted:** Sat May 24, 2008 11:00 am

FC checkbox?..Both names are FC!

Also, there are two subTotalRM and subTotalFC textbox in your markups...Anyway, i'll see how I could exploit this one.

I'll study how your codes goes...and i'll see how I could minimize and work with this.

I'll give you response as soon as I'll provide an aide. I won't be online on Sundays and Mondays, i'll be staring at this possibly tuesday...start crossing your fingers

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Well..I have made some changes on the reference of checkbox.Instead of using document.claim_dtl.fc,it should be use variable checkbox to store the correct checked checkbox.This can avoid a bundle of checkboxes that share the same name which confuse browser.

However,now another problem arise,the values of subtotalFC and totalFC are correctly assigned to the right field,but it bring wrong calculation result.For instance,when I type 1,subtotal and total become 3??

And somemore the correct value still display at the RM column (subtotalRM and totalRM).
KIndly ignore the part for "grandtotal"first,just make sure the calcuation is correct.Thanks...

Code:

function autocalc(row, v) {
    if(isNaN(v.value)) {
        alert("Please enter number only");
        v.value = "";
        return;
    } else if(v.value == 0) {
        alert("Please enter number greater than zero only");
        v.value = "";
        return;
    }
   
    if(checkbox == null || checkbox.checked == false) {
        var tmp = row.getElementsByTagName("input");
        var inputs = new Array();
        var output = false;
        var checkbox = null;
   
        for(var i = 0;i<tmp.length;i++) {
            if(tmp[i].getAttribute("type") == "checkbox")
                checkbox = tmp[i];
            else {
                if(tmp[i].getAttribute("rel") == "calculate_output_rm")
                    output = tmp[i];
                else
                    inputs[inputs.length] = tmp[i];
            }
       }
       if(!output) {
            alert("Error:No output calculated");
            return;
       }
 
        var subTotal = 0;
        for(var i = 0;i < inputs.length; i++) {
            var val = Number(inputs[i].value);
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
            if(!isNaN(num))
                subTotal += num;
        }
        output.value = subTotal; // subtotal of RM
 
        tmp = row.parentNode.getElementsByTagName("input");
        var total = 0;
        for (var i = 0; i < tmp.length; i++) {
            if (tmp[i].getAttribute("rel") === "calculate_output_rm") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
                if(!isNaN(num)) {
                       total += num;
               }
           }
       }
       var totalRM = document.getElementById("totalRM");
       totalRM.value = total; // total of RM
    }
 
    if(checkbox.checked == true) {
         tmp= row.getElementsByTagName("input");
   
         for(var i = 0;i<tmp.length;i++) {
            if(tmp[i].getAttribute("rel") == "calculate_output_fc")
                output = tmp[i];
           else
                inputs[inputs.length] = tmp[i];
       }
       if(!output) {
            alert("Error:No output calculated");
            return;
       }
 
       subTotal = 0;
       for(var i = 0;i < inputs.length; i++) {
            var val = Number(inputs[i].value);
            var num = Math.round(val*Math.pow(10,2)) / Math.pow(10,2);
            if(!isNaN(num))
                subTotal += num;
      }
      output.value = subTotal; // subtotal of FC
 
     tmp = row.parentNode.getElementsByTagName("input");
     total = 0;
        for (var i = 0; i < tmp.length; i++) {
            if (tmp[i].getAttribute("rel") === "calculate_output_fc") {
                var val = Number(tmp[i].value);
                var num = Math.round(val * 100) / 100;
                if(!isNaN(num)) {
                       total += num;
               }
           }
       }
       var totalFC = document.getElementById("totalFC");
      var fcValue = document.getElementById("fcValue");
       totalFC.value = total; // total of FC
      fcValue.value = total; // total of FC will be converted
    }
  
     /*var rm = 0;
   if( totalRM.value != "") {
      rm = Number(totalRM.value);
    else
       rm = 0;
   }

    var grand = 0;
   var fc = Number(fcValue.value);
   var excrate = document.getElementById("excrate");
   var val = Number(excrate.value); 
   var num = Math.round(val * 100) / 100;
   if (!isNaN(num)) {
       var grand = (num * fc) + rm;
   }
   var grandTotal = document.getElementById("grandTotal");
   grandTotal.value = grand;*/
}

rangana · **Posted:** Tue May 27, 2008 1:55 am

Now here's my ammended one:

Code:

<html> 
<body> 
<script type="text/javascript"> 
window.onload=function() 
{ 
var trainc=document.claim_dtl.trainingCost[0], 
travelc=document.claim_dtl.travelCost[0], 
entc=document.claim_dtl.entCost[0], 
miscc=document.claim_dtl.miscCost[0], 
subtotalcheck=document.claim_dtl.fc[0], 
subtotalrm=document.claim_dtl.subTotalRM[0],
checkbox=document.claim_dtl.fc[0], 
checkbox2=document.claim_dtl.fc[1], 
subtotalfc=document.claim_dtl.subTotalFC[0],
subtotalfc2=document.claim_dtl.subTotalFC[1],
subtotalrm2=document.claim_dtl.subTotalRM[1], 
subtotalcheck2=document.claim_dtl.fc[1], 
trainc2=document.claim_dtl.trainingCost[1], 
travelc2=document.claim_dtl.travelCost[1], 
entc2=document.claim_dtl.entCost[1], 
miscc2=document.claim_dtl.miscCost[1],
totalfc=document.claim_dtl.totalFC;
   trainc.onkeyup=function() 
   {compute1();} 
   trainc2.onkeyup=function() 
   {compute2();} 
   travelc.onkeyup=function() 
   {compute1();} 
   travelc2.onkeyup=function() 
   {compute2();} 
   entc.onkeyup=function() 
   {compute1();} 
   entc2.onkeyup=function() 
   {compute2();} 
   miscc.onkeyup=function() 
   {compute1();} 
   miscc2.onkeyup=function() 
   {compute2();} 
   checkbox.onclick=function()
   {
   if(this.checked)
   {
   subtotalfc.value=subtotalrm.value;
   totalfc.value=Number(subtotalfc.value)+Number(subtotalfc2.value);
   }
   }
   checkbox2.onclick=function()
   {
   if(this.checked)
   {
   subtotalfc2.value=subtotalrm2.value;
   totalfc.value=Number(subtotalfc.value)+Number(subtotalfc2.value);
   }
   }
   
} 
function compute1() 
{ 
var trainc=document.claim_dtl.trainingCost[0], 
travelc=document.claim_dtl.travelCost[0], 
entc=document.claim_dtl.entCost[0], 
miscc=document.claim_dtl.miscCost[0], 
subtotalcheck=document.claim_dtl.fc[0], 
subtotalrm=document.claim_dtl.subTotalRM[0], 
subtotalrm2=document.claim_dtl.subTotalRM[1], 
totalrm=document.claim_dtl.totalRM;
subtotalrm.value=Number(trainc.value)+Number(travelc.value)+Number(entc.value)+Number(miscc.value); 
totalrm.value=Number(subtotalrm.value)+Number(subtotalrm2.value); 
} 
function compute2() 
{ 
var trainc2=document.claim_dtl.trainingCost[1], 
travelc2=document.claim_dtl.travelCost[1], 
entc2=document.claim_dtl.entCost[1], 
miscc2=document.claim_dtl.miscCost[1], 
subtotalcheck2=document.claim_dtl.fc[1], 
subtotalrm=document.claim_dtl.subTotalRM[0], 
subtotalrm2=document.claim_dtl.subTotalRM[1], 
totalrm=document.claim_dtl.totalRM;
subtotalrm2.value=Number(trainc2.value)+Number(travelc2.value)+Number(entc2.value)+Number(miscc2.value); 
totalrm.value=Number(subtotalrm.value)+Number(subtotalrm2.value); 
} 
</script> 
<table> 
<form name="claim_dtl"> 
<tr> 
<td><input name="trainingCost" type="text" size="5" /></td> 
 <td ><input name="travelCost" type="text" size="7" /></td> 
<td ><input name="entCost" type="text" size="5" /></td> 
  <td><input name="miscCost" type="text" size="5" /></td> 
<td><input type="checkbox" name="fc" value="checkbox" /></td> 
<td>subTotalRM: <input name="subTotalRM" type="text" size="5" disabled="disabled" /></td> 
<td>subTotalFC: <input name="subTotalFC" type="text" size="10" disabled="disabled" /></td> 
 </tr> 
<tr> 
<td><input name="trainingCost" type="text" size="5" /></td> 
 <td ><input name="travelCost" type="text" size="7" /></td> 
<td ><input name="entCost" type="text" size="5" /></td> 
  <td><input name="miscCost" type="text" size="5" /></td> 
<td><input type="checkbox" name="fc" value="checkbox" /></td> 
<td>subTotalRM: <input name="subTotalRM" type="text" size="5" disabled="disabled" /></td> 
<td>subtTotalFC: <input name="subTotalFC" type="text" size="10" disabled="disabled" /></td> 
 </tr> 
<tr> 
 <td colspan="6" style="text-align:right;">totalRM: <input name="totalRM" id ="totalRM" type="text" size="5" disabled="disabled" /></td> 
<td>totalFC: <input name="totalFC" id ="totalFC" type="text" size="10" disabled="disabled" /></td> 
</tr> 
</form> 
</table> 
</body> 
</html> 

I don't understand what subTotalFc is suppose to show, but seeing this code, will help us both solve your problem

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Well..the calculation for FC is correct however it still display at the wrong field,subtotalRM and subtotalFC.I have tested it in IE and FF.

Code:

<html>
<body>
<script type="text/javascript">
window.onload=function()
{
var trainc=document.claim_dtl.trainingCost[0],
travelc=document.claim_dtl.travelCost[0],
entc=document.claim_dtl.entCost[0],
miscc=document.claim_dtl.miscCost[0],
subtotalcheck=document.claim_dtl.fc[0],
subtotalrm=document.claim_dtl.subTotalRM[0],
checkbox=document.claim_dtl.fc[0],
checkbox2=document.claim_dtl.fc[1],
subtotalfc=document.claim_dtl.subTotalFC[0],
subtotalfc2=document.claim_dtl.subTotalFC[1],
subtotalrm2=document.claim_dtl.subTotalRM[1],
subtotalcheck2=document.claim_dtl.fc[1],
trainc2=document.claim_dtl.trainingCost[1],
travelc2=document.claim_dtl.travelCost[1],
entc2=document.claim_dtl.entCost[1],
miscc2=document.claim_dtl.miscCost[1],
totalfc=document.claim_dtl.totalFC;
   trainc.onkeyup=function()
   {compute1();}
   trainc2.onkeyup=function()
   {compute2();}
   travelc.onkeyup=function()
   {compute1();}
   travelc2.onkeyup=function()
   {compute2();}
   entc.onkeyup=function()
   {compute1();}
   entc2.onkeyup=function()
   {compute2();}
   miscc.onkeyup=function()
   {compute1();}
   miscc2.onkeyup=function()
   {compute2();}
   checkbox.onclick=function()
   {
   if(this.checked)
   {
   subtotalfc.value=subtotalrm.value;
   totalfc.value=Number(subtotalfc.value)+Number(subtotalfc2.value);
   }
   }
   checkbox2.onclick=function()
   {
   if(this.checked)
   {
   subtotalfc2.value=subtotalrm2.value;
   totalfc.value=Number(subtotalfc.value)+Number(subtotalfc2.value);
   }
   }
   
}
function compute1()
{
var trainc=document.claim_dtl.trainingCost[0],
travelc=document.claim_dtl.travelCost[0],
entc=document.claim_dtl.entCost[0],
miscc=document.claim_dtl.miscCost[0],
subtotalcheck=document.claim_dtl.fc[0],
subtotalrm=document.claim_dtl.subTotalRM[0],
subtotalrm2=document.claim_dtl.subTotalRM[1],
totalrm=document.claim_dtl.totalRM;
subtotalrm.value=Number(trainc.value)+Number(travelc.value)+Number(entc.value)+Number(miscc.value);
totalrm.value=Number(subtotalrm.value)+Number(subtotalrm2.value);
}
function compute2()
{
var trainc2=document.claim_dtl.trainingCost[1],
travelc2=document.claim_dtl.travelCost[1],
entc2=document.claim_dtl.entCost[1],
miscc2=document.claim_dtl.miscCost[1],
subtotalcheck2=document.claim_dtl.fc[1],
subtotalrm=document.claim_dtl.subTotalRM[0],
subtotalrm2=document.claim_dtl.subTotalRM[1],
totalrm=document.claim_dtl.totalRM;
subtotalrm2.value=Number(trainc2.value)+Number(travelc2.value)+Number(entc2.value)+Number(miscc2.value);
totalrm.value=Number(subtotalrm.value)+Number(subtotalrm2.value);
}
</script>
<table>
<form name="claim_dtl">
<tr>
<td><input name="trainingCost" type="text" size="5" /></td>
 <td ><input name="travelCost" type="text" size="7" /></td>
<td ><input name="entCost" type="text" size="5" /></td>
  <td><input name="miscCost" type="text" size="5" /></td>
<td><input type="checkbox" name="fc" value="checkbox" /></td>
<td>subTotalRM: <input name="subTotalRM" type="text" size="5" disabled="disabled" /></td>
<td>subTotalFC: <input name="subTotalFC" type="text" size="10" disabled="disabled" /></td>
 </tr>
<tr>
<td><input name="trainingCost" type="text" size="5" /></td>
 <td ><input name="travelCost" type="text" size="7" /></td>
<td ><input name="entCost" type="text" size="5" /></td>
  <td><input name="miscCost" type="text" size="5" /></td>
<td><input type="checkbox" name="fc" value="checkbox" /></td>
<td>subTotalRM: <input name="subTotalRM" type="text" size="5" disabled="disabled" /></td>
<td>subtTotalFC: <input name="subTotalFC" type="text" size="10" disabled="disabled" /></td>
 </tr>
<tr>
 <td colspan="6" style="text-align:right;">totalRM: <input name="totalRM" id ="totalRM" type="text" size="5" disabled="disabled" /></td>
<td>totalFC: <input name="totalFC" id ="totalFC" type="text" size="10" disabled="disabled" /></td>
</tr>
</form>
</table>
</body>
</html>

vince_cks · **Joined:** Fri May 23, 2008 8:19 am **Posts:** 9

Well..Now here's my ammended one:

Code:

function setupAutoCalc() {
    function isValidTable(table) { // check for the existing of table and row 
        if (!table) { 
            alert("Error:No table found!");
            return false;
        }
        if (table.tBodies.length === 0) {
            alert("Error:No row found!");
            return false;
        }
        return true;
    }
    var table = document.getElementById("claim_dtl");
    if (!isValidTable(table)) {
        return;
    }
    var els = table.getElementsByTagName("input"), 
        elsLen = els.length; // retrieve all input elements in the table
       
    for (var i = 0; i < elsLen; i++) {
        var el = els[i];
        if (el.type === 'checkbox') { // event registration for checkboxes and text fields
            el.onchange = autocalc; 
        } else {
            el.onkeyup = autocalc;
        }
    }
}
onload = setupAutoCalc; // run the script when page loaded

function autocalc() {
    function isValidValue(val) { // validation of input value
        if (isNaN(val.value)) {
            alert("Please enter number only");
            val.value = "";
            return false;
        } else if (val.value === 0) {
            // alert("Please enter number greater than zero only");
            // val.value = "";
            return false;
        }
        return true;
    }
    function walkUpToElementFrom(target, source) {
        var el = source;
        while (el.nodeName !== target.toUpperCase() && el.nodeName !== 'BODY') {
            el = el.parentNode;
        }
        if (el.nodeName === 'BODY') {
            return null;
        }
        return el;
    }
    function getData(row) {
        var result = {
            inputs: [],
            output: {}
        };   
        var els = row.getElementsByTagName("input"),
            elsLen = els.length;
          
        for (var i = 0; i < elsLen; i += 1) {
            var el = els[i];
            if (el.getAttribute("type") === "checkbox") {
                result.checkbox = el;
            } else if (el.getAttribute("rel")) {
                if (el.getAttribute("rel") === "calculate_output_rm") {
                    result.output.rm = els[i];
                } else if (el.getAttribute("rel") === "calculate_output_fc") {
                    result.output.fc = el;
                }
            } else {
                result.inputs.push(el);
            }
        }
        return result;
    }
    function getOutputs(row) {
        var result = {rm: [], fc: []};
        var els = row.getElementsByTagName("input"),
            elsLen = els.length;
           
        for (var i = 0; i < elsLen; i += 1) {
            var el = els[i];
            if (el.getAttribute("rel") === "calculate_output_rm") {
                result.rm.push(el); // new length of result
            }
            if (el.getAttribute("rel") === "calculate_output_fc") {
                result.fc.push(el); // new length of result
            }
        }
        return result;
    }
    function total(els) {
        var sum = 0,
            elsLen = els.length;
           
        for (var i = 0;i < elsLen; i += 1) {
            var val = Number(els[i].value);
            val = Math.round(val * 100) / 100;
            if (!isNaN(val)) {
                sum += val;
            }
        }
        if (sum === 0) {
            sum = '';
        }
        return sum;
    }
    if (this.type === 'text' && !isValidValue(this)) {
        return;
    }
    var row = walkUpToElementFrom('tr', this);
    var data = getData(row);
    if (data.checkbox === null || data.checkbox.checked === false) {
        data.output.rm.value = total(data.inputs); // subtotal of RM
        data.output.fc.value = '';
    } else {
        data.output.rm.value = '';
        data.output.fc.value = total(data.inputs); // subtotal of FC
    }
 
    var outputs = getOutputs(row.parentNode);
    document.getElementById("totalRM").value = total(outputs.rm); // total of RM
    document.getElementById("totalFC").value = total(outputs.fc); // total of FC
   document.getElementById("fcValue").value = total(outputs.fc); // total of FC will be converted
}

To reduce the complexity of the logic,I seperated autoCalc() to several sub-fuctions according the usage.For setupAutoCalc(), instead of looping through each row looking for input elements, we can just get all the input elements from the table itself. So,rel property in input elements are not needed anymore except for subtotal and subtotal.

Now I will forward to the third part,the calculation of grandtotal after exchange rate is entered.

Multiple Row Auto Calculation and CheckBox

Who is online