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>
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>