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:

Code:

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

Thread: Invoice form: calculate grand total of products and add rows

Thread Tools

Search Thread

Invoice form: calculate grand total of products and add rows

Bookmarks

Bookmarks

Posting Permissions