Results 1 to 2 of 2

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

  1. #1
    Join Date
    Jun 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

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

    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>

  2. #2
    Join Date
    Oct 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •