473,324 Members | 2,178 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,324 software developers and data experts.

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.

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
3 7828
acoder
16,027 Expert Mod 8TB
Where's your code for calculating the grand total?
Jun 5 '10 #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
I have the same problem, does anyone can answer this post..
Jul 22 '11 #4

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

Similar topics

3
by: David B | last post by:
I am creating invoices for an app I am busy with. The transactions for the invoice come from 2 tables which store Sales and Facilities Hire. The current arrangement is that I create a temp...
15
by: NomoreSpam4Me | last post by:
Hi there i have a little problem with my invoice. Here it is: i have a main menu with buttons, one of my button is "Create new invoice", when click on it a form pop up so i can enter my...
3
by: Guoqi Zheng | last post by:
Dear sir, Our E-commerce site needs to print out a few 100s invoice a day. I do not know what is the best way to print invoice. Those invoice has to be printed on a very precise position on our...
2
by: cFleury | last post by:
Hello, I am new to ASP.NET and I have to print an invoice from an application written in ASP.NET, I have followed most of the threads in this newsgroup about the dificulties posed by the server...
4
by: Greg | last post by:
I'm guessing the problem I'm having has something to do with Master Pages or DetailsView because the exact same code works fine on a page without a Master Page and DetailsView controls. The...
1
by: Herman Beeksma | last post by:
Hi there! I have two tables: Customer (ID, Name) Invoice (ID, Date, Customer, Amount) and want to select only the *last* invoice for each customer. It's easy to get each customer's last...
2
RedSunFlowers32
by: RedSunFlowers32 | last post by:
Hi - I am creating a form for my personal business site. I want people to be able to get their own shipping total for the item(s) they have purchased. I have another code from a different file I...
3
by: Ken | last post by:
I am trying to run two form.submit() in sequence when clicking on <input image... ..."try this" When calling send() with only invoice.submit active, the form invoice works correctly. When...
4
by: gazza10001 | last post by:
Hi i hope you can help my company uses access and has modified for its needs usually what happens is you serach for the invoice by its number and then it brings all the information up such as...
1
by: kanishka1213 | last post by:
#!/activeperl/perl/bin/perl use CGI qw(:standard); print "Content-type: text/html\n\n"; print <<EndOfHTML; <html> <head> <script language="javascript" type="text/javascript">
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
0
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.