...

View Full Version : Auto calculate values



anita_86
12-09-2011, 01:44 PM
Hi.I have found this nice code through forum.Now I want to modify it a little bit.But dont know how to
It calculates amount column value by multiplying quantity to amount.i.e. amount=qty*rate and gross total is sum of all the array elements in amount.Here I want to add two more columns viz vat% and vat amount.Simply it will be amount*vat% / 100.Can anyone please tell me how I can do that?Other thing is, is it possible to separate the 5% vat and 12.5% vat values and display the total of them in respective column?
Here is the link for reference : http://kavisandeepdwivedi.com/forum.php (http://kavisandeepdwivedi.com/forum.php)
Please go through the code below and help me out

<html>
<head>
<script type="text/javascript">
function tot(elem) {
var d=document.getElementById("total").value;
var total=Number(d);
var e=document.getElementById("vat5").value;
var vat5=Number(e);
var f=document.getElementById("vat12_5").value;
var vat12_5=Number(f);
var g=document.getElementById("cash_discount").value;
var cash_discount=Number(g);

var h=(total+vat5+vat12_5)-cash_discount;
document.getElementById("grand_total").value = h;
}

var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}

</script>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

function deleteRow(tableID)
{
try
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked)
{
if (rowCount <= 1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e)
{
alert(e);
}
getValues();
}
</script>
</head>
<body>
<form name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)">
<tr>
<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" ></td>
<table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<td width="20"></td>
<td width="80" class="forhead" style="white-space:nowrap;">Qty</td>
<td width="80" class="forhead" style="white-space:nowrap;">Rate</td>
<td width="80" class="forhead" style="white-space:nowrap;">Amount</td>
<td width="80" class="forhead" style="white-space:nowrap;">Vat</td>
<td width="80" class="forhead" style="white-space:nowrap;">Vat Amount</td>
</tr>
</table>
<table border="0" id="dataTable" width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text">
<tr>
<td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="qty[]" onkeyup="getValues()" style="width:80px;" onBlur=""></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="amt[]" style="width:80px;"
onKeyUp="getValues()"></td>
<td width="80" align="right" class="forhead" style="white-space:nowrap;">
<select name="vat[]" style="width:80px" onChange="getValues()">
<option value="0">Select</option>
<option value="5">5</option>
<option value="12.5">12.5</option>
</select>
</td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="vat_amt[]" style="width:80px;"></td>
</tr>
</table>
<table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<tr>
<td width="20" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;"><input type="text" id="total" name="total[]" style="width:80px;" value=""></td>

</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="vat5[]" id="vat5" style="width:80px;"></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="vat12_5[]" id="vat12_5" style="width:80px;"></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Cash Dis :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" id="cash_discount" name="cash_discount[]" style="width:80px;" value=""></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Total :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="grand_total" id="grand_total" onKeyUp="tot()" style="width:80px;"></td>
</tr>
<tr>
<td align="center" colspan="6">
<input name="Submit" type="submit" value="Save" style="text-decoration:none"/>
<input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</body>
</html>

myfayt
12-09-2011, 02:09 PM
This is Javascript coding

mvmacd
12-09-2011, 05:45 PM
Hi.I have found this nice code through forum.Now I want to modify it a little bit.But dont know how to
It calculates amount column value by multiplying quantity to amount.i.e. amount=qty*rate and gross total is sum of all the array elements in amount.Here I want to add two more columns viz vat% and vat amount.Simply it will be amount*vat% / 100.Can anyone please tell me how I can do that?Other thing is, is it possible to separate the 5% vat and 12.5% vat values and display the total of them in respective column?
Here is the link for reference : http://kavisandeepdwivedi.com/forum.php (http://kavisandeepdwivedi.com/forum.php)
Please go through the code below and help me out

<html>
<head>
<script type="text/javascript">
function tot(elem) {
var d=document.getElementById("total").value;
var total=Number(d);
var e=document.getElementById("vat5").value;
var vat5=Number(e);
var f=document.getElementById("vat12_5").value;
var vat12_5=Number(f);
var g=document.getElementById("cash_discount").value;
var cash_discount=Number(g);

var h=(total+vat5+vat12_5)-cash_discount;
document.getElementById("grand_total").value = h;
}

var total = 0;
function getValues() {
var qty = 0;
var rate = 0;
var obj = document.getElementsByTagName("input");
for(var i=0; i<obj.length; i++){
if(obj[i].name == "qty[]"){var qty = obj[i].value;}
if(obj[i].name == "rate[]"){var rate = obj[i].value;}
if(obj[i].name == "amt[]"){
if(qty > 0 && rate > 0){obj[i].value = qty*rate;total+=(obj[i].value*1);}
else{obj[i].value = 0;total+=(obj[i].value*1);}
}
}
document.getElementById("total").value = total*1;
total=0;
}

</script>
<script type="text/javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
var colCount = table.rows[0].cells.length;
for(var i=0; i<colCount; i++) {
var newcell = row.insertCell(i);
newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
newcell.childNodes[0].value = "";
break;
case "checkbox":
newcell.childNodes[0].checked = false;
break;
case "select-one":
newcell.childNodes[0].selectedIndex = 0;
break;
}
}
}

function deleteRow(tableID)
{
try
{
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
for(var i=0; i<rowCount; i++)
{
var row = table.rows[i];
var chkbox = row.cells[0].childNodes[0];
if (null != chkbox && true == chkbox.checked)
{
if (rowCount <= 1)
{
alert("Cannot delete all the rows.");
break;
}
table.deleteRow(i);
rowCount--;
i--;
}
}
} catch(e)
{
alert(e);
}
getValues();
}
</script>
</head>
<body>
<form name="gr" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" onSubmit="return validateForm(this)">
<tr>
<td class="forhead" style="white-space:nowrap;"><input type="button" value="Add Row" onClick="addRow('dataTable')" >&nbsp;
<input type="button" value="Delete Row" onClick="deleteRow('dataTable')" ></td>
<table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<td width="20"></td>
<td width="80" class="forhead" style="white-space:nowrap;">Qty</td>
<td width="80" class="forhead" style="white-space:nowrap;">Rate</td>
<td width="80" class="forhead" style="white-space:nowrap;">Amount</td>
<td width="80" class="forhead" style="white-space:nowrap;">Vat</td>
<td width="80" class="forhead" style="white-space:nowrap;">Vat Amount</td>
</tr>
</table>
<table border="0" id="dataTable" width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text">
<tr>
<td class="forhead" style="white-space:nowrap;" width="20"><input type="checkbox" name="chk[]"/></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="qty[]" onkeyup="getValues()" style="width:80px;" onBlur=""></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="rate[]" onKeyUp="getValues()" style="width:80px;" value=""></td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="amt[]" style="width:80px;"
onKeyUp="getValues()"></td>
<td width="80" align="right" class="forhead" style="white-space:nowrap;">
<select name="vat[]" style="width:80px" onChange="getValues()">
<option value="0">Select</option>
<option value="5">5</option>
<option value="12.5">12.5</option>
</select>
</td>
<td class="forhead" style="white-space:nowrap;" width="80"><input type="text" name="vat_amt[]" style="width:80px;"></td>
</tr>
</table>
<table width="38%" align="center" cellpadding="0" cellspacing="0" class="normal-text" border="0">
<tr>
<td width="20" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">Gross Total:</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td width="80" class="forhead" style="white-space:nowrap;"><input type="text" id="total" name="total[]" style="width:80px;" value=""></td>

</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="vat5[]" id="vat5" style="width:80px;"></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Vat 12.5%:</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="vat12_5[]" id="vat12_5" style="width:80px;"></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Cash Dis :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" id="cash_discount" name="cash_discount[]" style="width:80px;" value=""></td>
</tr>
<tr>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">Total :</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;">&nbsp;</td>
<td class="forhead" style="white-space:nowrap;"><input type="text" name="grand_total" id="grand_total" onKeyUp="tot()" style="width:80px;"></td>
</tr>
<tr>
<td align="center" colspan="6">
<input name="Submit" type="submit" value="Save" style="text-decoration:none"/>
<input type="reset" value="Cancel" onClick="window.location.href='<?php echo $_SERVER['PHP_SELF'];?>'">
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</form>
</body>
</html>

This is not really php. and javascript math is pretty easy. you want "amount*vat% / 100"?



amount= (total * vat ) / 100


Your code is kind of confusing so you will need to code in the values [probably by variables taken from getElementById]

and as for doing multiple "vat" totals, that's not too hard, just do another calculation with the vat percentage different, and set it to another value, then put it in a table.

anita_86
12-10-2011, 10:17 AM
Thanks for your reply.I tried this with the code.But its not working as im not too well with javascript. I guess I posted it in wrong forum :confused:

Can you please explain how can I separate the different vat values in a variable?Because the names of the fields will be the same and I dont find easier way to separate them.

mvmacd
12-10-2011, 04:29 PM
Thanks for your reply.I tried this with the code.But its not working as im not too well with javascript. I guess I posted it in wrong forum :confused:

Can you please explain how can I separate the different vat values in a variable?Because the names of the fields will be the same and I dont find easier way to separate them.

Yes, this is the wrong category. This is PHP, JavaScript is where you should have posted it.

I went to the link you posted, and realized this was in a loop. I can't quite figure out how it works in the loop, so unfortunately I don't know what to say. You would have better luck in the JavaScript form, I'm not sure if you should just repost this in the JavaScript form or if you should ask a mod to move the thread.

Anyone else know?

Fou-Lu
12-10-2011, 05:30 PM
Moving from PHP forum to Javascript forum.
The client developers will be able to give you a lot better idea of what to do than us (well, better than myself at least :P)

anita_86
12-12-2011, 08:39 AM
Thx for your time mvmacd. Im also dealing with the same problem and could not find how this code works in a loop.May be due to less knowledge of js.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum