Multiple Row Auto Calculation and CheckBox
|
| View previous topic :: View next topic |
| Author |
Message |
vince_cks
Joined: 23 May 2008
Posts: 9
|
 Posted: Fri May 23, 2008 8:25 am Post subject: Multiple Row Auto Calculation and CheckBox |
 |
|
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... |
|
| Back to top |
|
 |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Sat May 24, 2008 5:25 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
How is setupAutoCalc and AutoCalc function being triggered by the way?..
We need to know as to reproduce the problem  |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Sat May 24, 2008 5:40 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
setupAutoCalc is triggered by onload event.
<body onload = "setupAutoCalc ()">
Any idea? |
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Sat May 24, 2008 6:59 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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 |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Sat May 24, 2008 7:23 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
Thank for reply. 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
}
}
}
|
|
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Sat May 24, 2008 7:54 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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. |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Sat May 24, 2008 9:46 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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. |
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Sat May 24, 2008 9:50 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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. |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Sat May 24, 2008 10:38 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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: </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" /> </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>
|
|
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Sat May 24, 2008 11:00 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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  |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Mon May 26, 2008 11:18 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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;*/
}
|
|
|
| Back to top |
|
|
rangana
500+ Club
Joined: 27 Feb 2008
Posts: 718
Location: Cebu City Philippines
|
| Posted: Tue May 27, 2008 1:55 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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 |
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Tue May 27, 2008 4:03 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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>
|
|
|
| Back to top |
|
|
vince_cks
Joined: 23 May 2008
Posts: 9
|
| Posted: Tue May 27, 2008 6:42 am Post subject: Re: Multiple Row Auto Calculation and CheckBox |
|
|
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. |
|
| Back to top |
|
|
|
Welcome to DEVPPL.com
You are not logged in, which means that you can't post in the forums.
Click here to Register
If you are a current member here on DEVPPL, please login below:
|
|
| |
