By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,688 Members | 1,226 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,688 IT Pros & Developers. It's quick & easy.

Invoice form: calculate grand total of products and add rows

P: 2
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.

Can anyone help me? Thanks!

This is what I have so far:


Expand|Select|Wrap|Line Numbers
  1. <?
  2. mysql_connect("", "", "");
  3. mysql_select_db(invoice);
  4. session_start();
  5.  
  6. ?>
  7.  
  8. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  9. <html xmlns="http://www.w3.org/1999/xhtml">
  10. <head>
  11.  
  12. <script type="text/javascript" language="javascript">
  13.  
  14.  
  15.  
  16.  
  17. function calcProdTotal(){
  18. var total;
  19. var amount = parseInt(document.invoiceForm.qty.value);
  20. total = (parseFloat(document.invoiceForm.price.value) * amount);
  21.  
  22.  
  23.  
  24.     document.invoiceForm.Prodtotal.value = round_decimals(total, 2);
  25.  
  26. }
  27.  
  28. function round_decimals(original_number, decimals) {
  29.     var result1 = original_number * Math.pow(10, decimals)
  30.     var result2 = Math.round(result1)
  31.     var result3 = result2 / Math.pow(10, decimals)
  32.     return pad_with_zeros(result3, decimals)
  33. }
  34.  
  35. function pad_with_zeros(rounded_value, decimal_places) {
  36.  
  37.     // Convert the number to a string
  38.     var value_string = rounded_value.toString()
  39.  
  40.     // Locate the decimal point
  41.     var decimal_location = value_string.indexOf(".")
  42.  
  43.     // Is there a decimal point?
  44.     if (decimal_location == -1) {
  45.  
  46.         // If no, then all decimal places will be padded with 0s
  47.         decimal_part_length = 0
  48.  
  49.         // If decimal_places is greater than zero, tack on a decimal point
  50.         value_string += decimal_places > 0 ? "." : ""
  51.     }
  52.     else {
  53.  
  54.         // If yes, then only the extra decimal places will be padded with 0s
  55.         decimal_part_length = value_string.length - decimal_location - 1
  56.     }
  57.  
  58.     // Calculate the number of decimal places that need to be padded with 0s
  59.     var pad_total = decimal_places - decimal_part_length
  60.  
  61.     if (pad_total > 0) {
  62.  
  63.         // Pad the string with 0s
  64.         for (var counter = 1; counter <= pad_total; counter++) 
  65.             value_string += "0"
  66.         }
  67.     return value_string
  68. }
  69.  
  70.  
  71. </script>
  72.  
  73. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  74. <title>Invoice</title>
  75. <style type="text/css" media="screen">
  76. @import url("css/layout.css");
  77. .style1 {
  78.     font-size: 14px;
  79.     font-weight: bold;
  80. }
  81. .style2 {font-size: 14px}
  82. </style>
  83. </head>
  84. <body>
  85.  
  86. <? include("header.php"); ?>
  87.  
  88.       <div class="find_more">
  89.         <p>Create new Invoice</p>
  90.       </div>
  91.       <div class="container_row">
  92.  
  93.         <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px">
  94.  
  95.  
  96.  
  97.         <?
  98.  
  99.     $sqlstmt = "SELECT * From Client";    
  100.     $result = mysql_query($sqlstmt);     
  101.     $options= "";     
  102.             while ($row=mysql_fetch_array($result)) { 
  103.             $ClientID = $row["Client_ID"];            
  104.             $orgName = $row["Org_Name"];    
  105.             $options.="<option value = \"$ClientID\">".$orgName."</option>";    
  106.         }
  107.  
  108.     $sqlstmt2 = "SELECT * From Item";    
  109.     $result2 = mysql_query($sqlstmt2);     
  110.     $options2= "";     
  111.             while ($row=mysql_fetch_array($result2)) {     
  112.             $ItemID = $row["Item_ID"];         
  113.             $itemName = $row["Item_Name"];        
  114.  
  115.             $options2.="<option value = \"$ItemID\">".$itemName."</option>";    
  116.         }    
  117.  
  118. ?>
  119.  
  120.     <form name="invoiceForm" method="post" action="">
  121.  
  122.     <p><strong>TO:</strong> <select name ="Client">
  123.     </br></br></br>
  124.             <option value = ""> --Select a Client-- <?= $options ?></option>
  125.         </select></p>
  126.     <table>
  127.     <table border='0' cellpadding='2' cellspacing='2' width='600' >                            
  128.             <tr bgcolor='#CCCCFF' align='centre' valign='centre' >
  129.                 <th>Attention</th>                                
  130.                 <th>From</th>
  131.                 <th colspan="2">Payment terms</th>                
  132.             </tr>            
  133.  
  134.  
  135.             <tr align='centre' valign='centre'>                    
  136.                     <td><input type="text" name = "contact"/></td>   
  137.                     <td><input type="text" name = "sender"/></td>   
  138.                     <td colspan="2"><input type="text" name = "paymentTerms"/></td>   
  139.             </tr>                                               
  140.  
  141.     <tr bgcolor='#CCCCFF' align='centre' valign='centre' >                                
  142.  
  143.                     <th>Item Name</th>                                
  144.                     <th>Cost ($)</th>                                
  145.                     <th>Quantity</th>                                
  146.                     <th>Total</th>                                
  147.             </tr>                
  148.  
  149.             <tr align='centre' valign='centre'>                    
  150.                     <td><select name ="ItemName">
  151.                         <option value = ""> --Select a Item-- <?= $options2 ?></option>
  152.                         </select>
  153.                     </td>   
  154.                     <td><input name="price" type="text" id="price"></td> 
  155.                     <td><input type="text" size="5" name="qty" onChange="calcProdTotal()"></td> 
  156.                     <td><input type="text" name="Prodtotal" onBlur="parseelement(this)"></td> 
  157.             </tr>     
  158.  
  159.             <tr>
  160.                     <th colspan="3" align='right'>GST:</th>
  161.                     <td><input type="text" value="7" name = "gst"/>%</td>
  162.             </tr>
  163.  
  164.             <tr>
  165.                     <th colspan="3" align='right'>Sub Total:</th>
  166.                     <td><input type="text" name = "Subtotal"/></td>
  167.             </tr>    
  168.  
  169.             <tr>
  170.                     <th colspan="3" align='right'>Grand Total:</th>
  171.                     <td><input type="text" name = "Grandtotal"/></td>
  172.             </tr>    
  173.  
  174.         </table>
  175.  
  176.     </form>
  177.  
  178.        <br />
  179.  
  180.  
  181.           <? include("footer.php"); ?>
  182. </body>
  183. </html>
Jun 4 '10 #1
Share this Question
Share on Google+
3 Replies


acoder
Expert Mod 15k+
P: 16,027
Where's your code for calculating the grand total?
Jun 5 '10 #2

P: 2
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.

Expand|Select|Wrap|Line Numbers
  1. <?
  2. mysql_connect("", "", "");
  3. mysql_select_db(invoice);
  4. session_start();
  5.  
  6.  
  7. ?>
  8.  
  9. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  10. <html xmlns="http://www.w3.org/1999/xhtml">
  11. <head>
  12.  
  13. <script type="text/javascript" language="javascript">
  14.  
  15. function calcGrand(){
  16.  
  17. var total;
  18. var gst;
  19. var Grandtotal;
  20. var gst2;
  21.  
  22. total = parseInt(document.invoiceForm.Prodtotal.value);
  23.  
  24. gst = document.invoiceForm.gst.value;
  25. gst2 = (gst/100)*total;
  26. Grandtotal = gst2 + total;
  27.  
  28. document.invoiceForm.Grandtotal.value = round_decimals(Grandtotal,2);
  29.  
  30.  
  31. }
  32.  
  33. function calcProdTotal(){
  34. var total;
  35. var amount = parseInt(document.invoiceForm.qty.value);
  36. total = (parseFloat(document.invoiceForm.price.value) * amount);
  37.  
  38.     document.invoiceForm.Prodtotal.value = round_decimals(total, 2);    
  39. }
  40.  
  41.  
  42.  
  43. function calcProdTotal2(for_what){
  44. var this_row = for_what.parentElement.parentElement;   
  45. var qty = this_row.getElementsByTagName("td")[1].getElementsByTagName("input")[0].value;   
  46. var up  = this_row.getElementsByTagName("td")[2].getElementsByTagName("input")[0].value;   
  47. var total = qty * up;   
  48. for_what.value = round_decimals(total, 2);     
  49. return;
  50.  
  51.  
  52. }
  53.  
  54.  
  55.  
  56.  
  57. function round_decimals(original_number, decimals) {
  58.     var result1 = original_number * Math.pow(10, decimals)
  59.     var result2 = Math.round(result1)
  60.     var result3 = result2 / Math.pow(10, decimals)
  61.     return pad_with_zeros(result3, decimals)
  62. }
  63.  
  64. function pad_with_zeros(rounded_value, decimal_places) {
  65.  
  66.     // Convert the number to a string
  67.     var value_string = rounded_value.toString()
  68.  
  69.     // Locate the decimal point
  70.     var decimal_location = value_string.indexOf(".")
  71.  
  72.     // Is there a decimal point?
  73.     if (decimal_location == -1) {
  74.  
  75.         // If no, then all decimal places will be padded with 0s
  76.         decimal_part_length = 0
  77.  
  78.         // If decimal_places is greater than zero, tack on a decimal point
  79.         value_string += decimal_places > 0 ? "." : ""
  80.     }
  81.     else {
  82.  
  83.         // If yes, then only the extra decimal places will be padded with 0s
  84.         decimal_part_length = value_string.length - decimal_location - 1
  85.     }
  86.  
  87.     // Calculate the number of decimal places that need to be padded with 0s
  88.     var pad_total = decimal_places - decimal_part_length
  89.  
  90.     if (pad_total > 0) {
  91.  
  92.         // Pad the string with 0s
  93.         for (var counter = 1; counter <= pad_total; counter++) 
  94.             value_string += "0"
  95.         }
  96.     return value_string
  97. }
  98.  
  99.  
  100. </script>
  101.  
  102. <script type="text/javascript" language="javascript">
  103.  
  104. function insRows() {
  105. var tbl = document.getElementById('invoicetable');
  106.   var lastRow = tbl.rows.length;
  107.   // if there's no header row in the table, then iteration = lastRow + 1
  108.   var iteration = lastRow;
  109.   var row = tbl.insertRow(lastRow);
  110.   alert(iteration);
  111.   // select cell
  112.   var cellRightSel = row.insertCell(0);
  113.   var sel = document.createElement('select');
  114.   sel.name = 'ItemName' + iteration;
  115.   sel.options[0] = new Option('Web Solution', '1');
  116.   sel.options[1] = new Option('System Integration', '2');
  117.   sel.options[2] = new Option('Broadband Commission', '3');
  118.   sel.options[3] = new Option('Design & Printing', '4');
  119.   sel.options[4] = new Option('Ink & Toner', '5');
  120.   sel.options[5] = new Option('Miscellaneous', '6');
  121.   cellRightSel.appendChild(sel);
  122.  
  123.  
  124.   // right cell
  125.   var cellRight = row.insertCell(1);
  126.   var el = document.createElement('input');
  127.   el.type = 'text';
  128.   el.name = 'price' + iteration;
  129.   el.id = 'price' + iteration;
  130.  
  131.  
  132.   el.onkeypress = keyPressTest;
  133.   cellRight.appendChild(el);
  134.  
  135.   var cellRight2 = row.insertCell(2);
  136.   var el = document.createElement('input');
  137.   el.type = 'text';
  138.   el.name = 'qty' + iteration;
  139.   el.id = 'qty' + iteration;
  140.  
  141.  
  142.  
  143.   el.onkeypress = keyPressTest;
  144.   cellRight2.appendChild(el);
  145.  
  146.  
  147.  
  148.   var cellRight3 = row.insertCell(2);
  149.   var el = document.createElement('input');
  150.   el.type = 'text';
  151.   el.name = 'ProdTotal' + iteration;
  152.   el.id = 'ProdTotal' + iteration;
  153. el.onFocus = 'calcProdTotal(this)';
  154.   alert(el.name);
  155.  
  156.   el.onkeypress = keyPressTest;
  157.   cellRight3.appendChild(el);
  158. }
  159. function keyPressTest(e, obj)
  160. {
  161.   var validateChkb = document.getElementById('chkValidateOnKeyPress');
  162.   if (validateChkb.checked) {
  163.     var displayObj = document.getElementById('spanOutput');
  164.     var key;
  165.     if(window.event) {
  166.       key = window.event.keyCode; 
  167.     }
  168.     else if(e.which) {
  169.       key = e.which;
  170.     }
  171.     var objId;
  172.     if (obj != null) {
  173.       objId = obj.id;
  174.     } else {
  175.       objId = this.id;
  176.     }
  177.     displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
  178.   }
  179. }
  180.  
  181.  
  182.  
  183.  
  184.  
  185. </script>
  186. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  187. <title>Invoice</title>
  188. <style type="text/css" media="screen">
  189. @import url("css/layout.css");
  190. .style1 {
  191.     font-size: 14px;
  192.     font-weight: bold;
  193. }
  194. .style2 {font-size: 14px}
  195. </style>
  196. </head>
  197. <body>
  198.  
  199. <? include("header.php"); ?>
  200.  
  201.       <div class="find_more">
  202.         <p>Create new Invoice</p>
  203.       </div>
  204.       <div class="container_row">
  205.  
  206.         <div style="font-family:arial; font-size : 12pt; padding:20px 0 0 20px">
  207.  
  208.  
  209.  
  210.         <?
  211.  
  212.     $sqlstmt = "SELECT * From Client";    
  213.     $result = mysql_query($sqlstmt);     
  214.     $options= "";     
  215.             while ($row=mysql_fetch_array($result)) { 
  216.             $ClientID = $row["Client_ID"];            
  217.             $orgName = $row["Org_Name"];    
  218.             $options.="<option value = \"$ClientID\">".$orgName."</option>";    
  219.         }
  220.  
  221.     $sqlstmt2 = "SELECT * From Item";    
  222.     $result2 = mysql_query($sqlstmt2);     
  223.     $options2= "";     
  224.             while ($row=mysql_fetch_array($result2)) {     
  225.             $ItemID = $row["Item_ID"];         
  226.             $itemName = $row["Item_Name"];        
  227.  
  228.             $options2.="<option value = \"$ItemID\">".$itemName."</option>";    
  229.         }    
  230.  
  231. ?>
  232.  
  233.     <form name="invoiceForm" method="post" action="">
  234.  
  235.     <p><strong>TO:</strong> <select name ="Client">
  236.     </br></br></br>
  237.             <option value = ""> --Select a Client-- <?= $options ?></option>
  238.         </select></p>
  239.     <table>
  240.     <table id='invoicetable' border='0' cellpadding='2' cellspacing='2' width='600'>                            
  241.             <tr bgcolor='#CCCCFF' align='centre' valign='centre' >
  242.                 <th>Attention</th>                                
  243.                 <th>From</th>
  244.                 <th colspan="2">Payment terms</th>                
  245.             </tr>            
  246.  
  247.  
  248.             <tr align='centre' valign='centre'>                    
  249.                     <td><input type="text" name = "contact"/></td>   
  250.                     <td><input type="text" name = "sender"/></td>   
  251.                     <td colspan="2"><input type="text" size ="50" name = "paymentTerms"/></td>   
  252.             </tr>                                               
  253.  
  254.     <tr bgcolor='#CCCCFF' align='centre' valign='centre' >                                
  255.  
  256.                     <th>Item Name</th>                                
  257.                     <th>Cost ($)</th>                                
  258.                     <th>Quantity</th>                                
  259.                     <th>Total</th>                                
  260.             </tr>                
  261.  
  262.             <tr align='centre' valign='centre'>                    
  263.                     <td><select name ="ItemName">
  264.                         <option value = ""> --Select a Item-- <?= $options2 ?></option>
  265.                         </select>
  266.                     </td>   
  267.                     <td><input name="price3" type="text"  id="price" onkeypress="keyPressTest(event, this);" ></td> 
  268.                     <td><input type="text" id="qty" name="qty3" ></td> 
  269.                     <td><input type="text"  id="Prodtotal" name="Prodtotal3" onFocus="calcProdTotal(this)" ></td> 
  270.             </tr> 
  271.  
  272.             </table>
  273. <input type="button" align="middle"  value="ADD"  onclick="insRows()" >            
  274.     <table border='0' cellpadding='2' cellspacing='2' width='570' align='right' valign='right'>
  275.             <tr>
  276.                     <th colspan="3" align='right'>Sub Total:</th>
  277.                     <td><input type="text" size = "18" name = "Subtotal" /></td>
  278.             </tr>
  279.  
  280.             <tr>
  281.                     <th colspan="3" align='right'>GST:</th>
  282.                     <td><input type="text" size = "18" value="7" name = "gst"/>%</td>
  283.             </tr>
  284.  
  285.             <tr>
  286.                     <th colspan="3" align='right'>Grand Total:</th>
  287.                     <td><input type="text" size = "18" name = "Grandtotal" onFocus="calcGrand()" /></td>
  288.             </tr>    
  289.  
  290.         </table>
  291.  
  292.     </form>
  293.  
  294.        <br />
  295.  
  296.  
  297.           <? include("footer.php"); ?>
  298. </body>
  299. </html>
  300.  
Jun 6 '10 #3

P: 1
I have the same problem, does anyone can answer this post..
Jul 22 '11 #4

Post your reply

Sign in to post your reply or Sign up for a free account.