Invoice form: calculate grand total of products and add rows

**acoder** · Jun 5 '10, 08:18 PM

Where's your code for calculating the grand total?

**monstez88** · Jun 6 '10, 07:44 AM

Hi, thanks for replying. I've made some changes to my code. I'm able to calc the product total and grand total, but thats only for one row. Therefore, if I insert another row, it does not do the calc product or grand total function.

Code:

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


?>

<!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 calcProdTotal2(for_what){
var this_row = for_what.parentElement.parentElement;   
var qty = this_row.getElementsByTagName("td")[1].getElementsByTagName("input")[0].value;   
var up  = this_row.getElementsByTagName("td")[2].getElementsByTagName("input")[0].value;   
var total = qty * up;   
for_what.value = round_decimals(total, 2);     
return;

	
}
	



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>

**AnakDajal** · Jul 22 '11, 02:57 PM

I have the same problem, does anyone can answer this post..

Invoice form: calculate grand total of products and add rows

Invoice form: calculate grand total of products and add rows

Comment

Comment

Comment