PDA

View Full Version : Invoice form: calculate grand total of products and add rows



monstez88
06-11-2010, 03:44 AM
Hi, I'm trying to create a Invoice form with javascript. Basically, my invoice form should have the field item, cost, quantity and product total.

It shd have a function to allow the user to add rows if they want more than one item.

In the end, there should be a sub total. I am able to use javascript to calc the total of each product, but not all products(Grand total). I am also unable to add rows.

I tried to append a number to the name but it does not work. I'm using this javascript to add row. I can successfully add row, but I can't integrate the calc total or product total script with this. Meaning after I add row, that row will not auto calc the product total or add on to the total.

Can anyone help me? Thanks!

This is what I have so far:


<?
mysql_connect("", "", "");
mysql_select_db(invoice);

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript" language="javascript">

function calcGrand(){

var total;
var gst;
var Grandtotal;
var gst2;

total = parseInt(document.invoiceForm.Prodtotal.value);

gst = document.invoiceForm.gst.value;
gst2 = (gst/100)*total;
Grandtotal = gst2 + total;

document.invoiceForm.Grandtotal.value = round_decimals(Grandtotal,2);


}

function calcProdTotal(){
var total;
var amount = parseInt(document.invoiceForm.qty.value);
total = (parseFloat(document.invoiceForm.price.value) * amount);

document.invoiceForm.Prodtotal.value = round_decimals(total, 2);
}


function round_decimals(original_number, decimals) {
var result1 = original_number * Math.pow(10, decimals)
var result2 = Math.round(result1)
var result3 = result2 / Math.pow(10, decimals)
return pad_with_zeros(result3, decimals)
}

function pad_with_zeros(rounded_value, decimal_places) {

// Convert the number to a string
var value_string = rounded_value.toString()

// Locate the decimal point
var decimal_location = value_string.indexOf(".")

// Is there a decimal point?
if (decimal_location == -1) {

// If no, then all decimal places will be padded with 0s
decimal_part_length = 0

// If decimal_places is greater than zero, tack on a decimal point
value_string += decimal_places > 0 ? "." : ""
}
else {

// If yes, then only the extra decimal places will be padded with 0s
decimal_part_length = value_string.length - decimal_location - 1
}

// Calculate the number of decimal places that need to be padded with 0s
var pad_total = decimal_places - decimal_part_length

if (pad_total > 0) {

// Pad the string with 0s
for (var counter = 1; counter <= pad_total; counter++)
value_string += "0"
}
return value_string
}


</script>

<script type="text/javascript" language="javascript">

function insRows() {
var tbl = document.getElementById('invoicetable');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);
alert(iteration);
// select cell
var cellRightSel = row.insertCell(0);
var sel = document.createElement('select');
sel.name = 'ItemName' + iteration;
sel.options[0] = new Option('Web Solution', '1');
sel.options[1] = new Option('System Integration', '2');
sel.options[2] = new Option('Broadband Commission', '3');
sel.options[3] = new Option('Design & Printing', '4');
sel.options[4] = new Option('Ink & Toner', '5');
sel.options[5] = new Option('Miscellaneous', '6');
cellRightSel.appendChild(sel);


// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.type = 'text';
el.name = 'price' + iteration;
el.id = 'price' + iteration;


el.onkeypress = keyPressTest;
cellRight.appendChild(el);

var cellRight2 = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'qty' + iteration;
el.id = 'qty' + iteration;



el.onkeypress = keyPressTest;
cellRight2.appendChild(el);



var cellRight3 = row.insertCell(2);
var el = document.createElement('input');
el.type = 'text';
el.name = 'ProdTotal' + iteration;
el.id = 'ProdTotal' + iteration;
el.onFocus = 'calcProdTotal(this)';
alert(el.name);

el.onkeypress = keyPressTest;
cellRight3.appendChild(el);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}





</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Invoice</title>
<style type="text/css" media="screen">
@import url("css/layout.css");
.style1 {
font-size: 14px;
font-weight: bold;
}
.style2 {font-size: 14px}
</style>
</head>
<body>

<? include("header.php"); ?>

<div class="find_more">
<p>Create new Invoice</p>
</div>
<div class="container_row">

<div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px">



<?

$sqlstmt = "SELECT * From Client";
$result = mysql_query($sqlstmt);
$options= "";
while ($row=mysql_fetch_array($result)) {
$ClientID = $row["Client_ID"];
$orgName = $row["Org_Name"];
$options.="<option value = \"$ClientID\">".$orgName."</option>";
}

$sqlstmt2 = "SELECT * From Item";
$result2 = mysql_query($sqlstmt2);
$options2= "";
while ($row=mysql_fetch_array($result2)) {
$ItemID = $row["Item_ID"];
$itemName = $row["Item_Name"];

$options2.="<option value = \"$ItemID\">".$itemName."</option>";
}

?>

<form name="invoiceForm" method="post" action="">

<p><strong>TO:</strong> <select name ="Client">
</br></br></br>
<option value = ""> --Select a Client-- <?= $options ?></option>
</select></p>
<table>
<table id='invoicetable' border='0' cellpadding='2' cellspacing='2' width='600'>
<tr bgcolor='#CCCCFF' align='centre' valign='centre' >
<th>Attention</th>
<th>From</th>
<th colspan="2">Payment terms</th>
</tr>


<tr align='centre' valign='centre'>
<td><input type="text" name = "contact"/></td>
<td><input type="text" name = "sender"/></td>
<td colspan="2"><input type="text" size ="50" name = "paymentTerms"/></td>
</tr>

<tr bgcolor='#CCCCFF' align='centre' valign='centre' >

<th>Item Name</th>
<th>Cost ($)</th>
<th>Quantity</th>
<th>Total</th>
</tr>

<tr align='centre' valign='centre'>
<td><select name ="ItemName">
<option value = ""> --Select a Item-- <?= $options2 ?></option>
</select>
</td>
<td><input name="price3" type="text" id="price" onkeypress="keyPressTest(event, this);" ></td>
<td><input type="text" id="qty" name="qty3" ></td>
<td><input type="text" id="Prodtotal" name="Prodtotal3" onFocus="calcProdTotal(this)" ></td>
</tr>

</table>
<input type="button" align="middle" value="ADD" onclick="insRows()" >
<table border='0' cellpadding='2' cellspacing='2' width='570' align='right' valign='right'>
<tr>
<th colspan="3" align='right'>Sub Total:</th>
<td><input type="text" size = "18" name = "Subtotal" /></td>
</tr>

<tr>
<th colspan="3" align='right'>GST:</th>
<td><input type="text" size = "18" value="7" name = "gst"/>%</td>
</tr>

<tr>
<th colspan="3" align='right'>Grand Total:</th>
<td><input type="text" size = "18" name = "Grandtotal" onFocus="calcGrand()" /></td>
</tr>

</table>

</form>

<br />


<? include("footer.php"); ?>
</body>
</html>

qakbar
10-16-2011, 06:34 PM
Hi,

Can you please tell me if you got this to work as I want to create an invoice system but a more basic type where I have 10-15 fields and the user fills in the form and the calculations are done using javascript and when submit is pressed it enters the data into a database.

I do not want to pull any fields out of the database but more have a solution to calculate the linetotal, subtotal, tax and grandtotal than the fileds are entered into the datababse.

Any help is much apprecaited.

Thanks