Multiple Row Auto Calculation and CheckBox

Discussion in 'JavaScript' started by vince_cks, May 24, 2008.

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

    
<body onload="setupAutoCalc()">
<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>
</body>
    HTML:
    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:

    
<script>
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>
    Code (markup):
    Why the onclick event for checkbox document.claim_dtl.fc[0].onclick=function()
    is not executed?This is the logic that I use to control the assignment of subtotal and total to the correct field.Thank for your pleasure help...:)
     
    vince_cks, May 24, 2008 IP
  2. vince_cks

    vince_cks Peon

    Messages:
    2
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #2
    well..i noticed that there have multiple checkboxes that share the same id,fc.When I change document.claim_dtl.fc to a variable checkbox,which act as a reference of selected checkbox,if checkbox is checked, the value of subtotalFC and totalFC can assign to the correct fields but calculation result is incorrect.Somemore,there still have values being assigned to subtotalRM and totalRM fields.What might cause it?Thank for your plaesure...:)


    
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;*/
}
    Code (markup):
     
    vince_cks, May 25, 2008 IP