473,322 Members | 1,379 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,322 software developers and data experts.

i need this code to print price x quantity in dollars. for instance 20 x 10=$200

17
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html> <!-- The DOCTYPE tells the browser what version of HTML it should be expecting. -->
  2. <html>
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Order Form</title>
  6.   <!-- To reference a single stylesheet, use the link element: -->
  7.   <link href="css/OrderForm.css" rel="stylesheet">
  8.   <style>
  9.     /* Make all the input elements that have an id that starts with Qty
  10.        be 5 characters wide. (Now size=5 isn't needed in the HTML 3 times) */
  11.     input[id^=Qty] { width:5em; }
  12.     /* The first <td> in each row should be 80px wide. Now we don't have to
  13.        clutter up the HTML with this and we don't have to repeat it 3 times. */
  14.     td:first-child { width:80px; }
  15.  
  16.   body {  
  17.   background-color:grey;
  18. }
  19. th,td{
  20.   border-collapse: collapse;
  21.   text-align: left;
  22.  
  23.  
  24.   </style>
  25. </head> <!-- You didn't close your <head> tag! -->
  26. <body>
  27. <form name="myForm" action="/submit.php" onsubmit="return validateForm()" method="post">
  28. <h1 style="text-align: left">Order Form</h1>
  29. <table style="width:50%">
  30. <tr>
  31. <td><strong>Name</strong></td>
  32. <td><input type="text" name="fname" placeholder="Zayn" >
  33. </td>
  34.  
  35. <td><strong>Surname</strong></td>
  36. <td><input type="text" name="fsurname" placeholder="Saidi"></td>
  37. </tr>
  38.  
  39. <tr>
  40. <td><strong>Email</strong></td>
  41. <td><input type="text" name="fmail" placeholder="zaynsaidi@gmail.com"></td>
  42. <td><strong>Cell Number</strong></td>
  43. <td><input type="text" name="fcellnumber" placeholder="07712394400"></td>
  44. </tr>
  45. <tr>
  46. <td><strong>Address</strong><br/><br/><br/></td>
  47. <td><textarea name="Address" rows="4" cols="30"> </textarea></td>
  48. </tr><br><br>
  49. </tr>
  50. <table>
  51. </tr><br><br>
  52.  
  53.  
  54.   <form>
  55.     <table border="1" style="width:50%" >
  56.  
  57.       <tr>
  58.         <th>Product</th>
  59.         <th>Part Number</th>
  60.         <th>Quantity</th>
  61.         <th>Price</th>
  62.         <th>Total</th>
  63.         </tr>
  64.  
  65.       <tr>
  66.         <td>RAM</td>
  67.         <td>HP100</td>
  68.         <td ><input type="text"  id="QtyA" size="15" ></td>
  69.         <td>ZW$5.00</td>
  70.         <!-- You shouldn't be putting results of calculations into input fields
  71.              when you don't want the user to modify the data. Just place it into
  72.              an elmeent as its .textContent -->
  73.         <td size="15" style="background-color:white" id="TotalA"></td>
  74.       </tr>
  75.  
  76.       <tr>
  77.         <td>SPEAKER</td>
  78.         <td>HP200</td>
  79.         <td><input type="text" id="QtyB"></td>
  80.         <td>ZW$10.00</td>
  81.          <!-- You shouldn't be putting results of calculations into input fields
  82.              when you don't want the user to modify the data. Just place it into
  83.              an elmeent as its .textContent -->       
  84.         <td style="background-color:white" id="TotalB"></td>
  85.       </tr>
  86.  
  87.       <tr>
  88.         <td>POWER SUPPLY</td>
  89.         <td>HP300</td>
  90.         <td><input type="text" id="QtyC"></td>
  91.         <td>ZW$15.00</td>
  92.          <!-- You shouldn't be putting results of calculations into input fields
  93.              when you don't want the user to modify the data. Just place it into
  94.              an elmeent as its .textContent --> 
  95.         <td style="background-color:white"  id="TotalC"></td>
  96.       </tr>
  97.  
  98.         <tr>
  99.         <td>HDD</td>
  100.         <td>HP400</td>
  101.         <td><input type="text" id="QtyD"></td>
  102.         <td>ZW$20.00</td>
  103.          <!-- You shouldn't be putting results of calculations into input fields
  104.              when you don't want the user to modify the data. Just place it into
  105.              an elmeent as its .textContent --> 
  106.         <td  style="background-color:white" id="TotalD"></td>
  107.       </tr>
  108.       <tr>
  109.         <td>MOTHERBOARD</td>
  110.         <td>HP500</td>
  111.         <td><input type="text" id="QtyE"></td>
  112.         <td>ZW$30.00</td>
  113.  
  114.          <!-- You shouldn't be putting results of calculations into input fields
  115.              when you don't want the user to modify the data. Just place it into
  116.              an elmeent as its .textContent --> 
  117.         <td style="background-color:white" id="TotalE" ></td>
  118.       </tr>
  119.       <tr> 
  120.         <td colspan="4">TOTAL</td>
  121.  
  122.         <!-- You shouldn't be putting results of calculations into input fields
  123.              when you don't want the user to modify the data. Just place it into
  124.              an elmeent as its .textContent -->
  125.         <!-- You need to have this cell span over the remaining columns of the 
  126.              table, so colspan=4 needs to be added. -->
  127.         <td  style="background-color:white" id="grandTotal" ></td>
  128.       </tr>
  129.     </table><br>
  130.          <!-- Your form doesn't actually submit data anywhere, so you shouldn't
  131.          have a submit button. A regular button will do. -->
  132.         <strong>Payment Details</strong><br>
  133.         <strong>Methods</strong>
  134.         <table>
  135.         <tr>
  136.         <td><input type="radio" name="gender" value="Visa" checked><strong>Visa</strong></td>
  137.         <td><strong>Card Number</strong></td>
  138.         <td><input type="text" name="fcardnumber" maxlength="30" placeholder="6079 9500 0013 7538">
  139.         <td><strong>Expiry Date</strong></td>
  140.         <td><input type="text" name="fexpirydate" placeholder="22/08/2030" maxlength="30">
  141.         <tr/>
  142.         <tr>
  143.         <td><input type="radio" name="gender" value="Cash" checked><strong>Cash</strong></td>
  144.         </tr>
  145.         <tr>
  146.         <td><input type="radio" name="gender" value="Ecocash" checked><strong>Ecocash</strong></td>
  147.         </tr>
  148.         <tr>
  149.         <td><input type="radio" name="gender" value="Swipe" checked><strong>Swipe</strong></td>
  150.         </tr><br><br><br>
  151.         <table>
  152.  
  153.         <tr>
  154.         <td><strong>Delivery Address</strong><br/><br/><br/></td>
  155.         <td><textarea name="Address" rows="4" cols="30"> </textarea></td>
  156.         </tr><br><br>
  157.         <table>
  158.         </tr>
  159.         </tr>
  160.         <tr>
  161.         </table>
  162.         <td><input type="button" value="Calculate">
  163.         <input type="reset" value="Reset"></td>
  164.         </tr>
  165.         </form> 
  166.   <script>
  167.     // Get references to the HTML elements that you'll be working with
  168.     var qtyBoxA = document.getElementById('QtyA');
  169.     var qtyBoxB = document.getElementById('QtyB');
  170.     var qtyBoxC = document.getElementById('QtyC');
  171.     var qtyBoxD = document.getElementById('QtyD');
  172.     var qtyBoxE = document.getElementById('QtyE');
  173.  
  174.  
  175.     var totBoxA = document.getElementById('TotalA');
  176.     var totBoxB = document.getElementById('TotalB');
  177.     var totBoxC = document.getElementById('TotalC');
  178.     var totBoxD = document.getElementById('TotalD');
  179.     var totBoxE = document.getElementById('TotalE');
  180.  
  181.     var grandTot = document.getElementById('grandTotal');
  182.     var btnGetTot = document.querySelector("input[type=button]");
  183.     var btnReset = document.querySelector("input[type=reset]");    
  184.  
  185.     // Set up event handling in JavaScript, not HTML.
  186.     qtyBoxA.addEventListener("change", calc);
  187.     qtyBoxB.addEventListener("change", calc);
  188.     qtyBoxC.addEventListener("change", calc);
  189.     qtyBoxD.addEventListener("change", calc);
  190.     qtyBoxE.addEventListener("change", calc);
  191.     btnGetTot.addEventListener("click", getGrandTotal);
  192.     btnReset.addEventListener("click", reset);
  193.  
  194.     var gt = null; // Will hold the grand total
  195.  
  196.     function calc() {
  197.  
  198.       var priceA = 5;
  199.       var priceB = 10;
  200.       var priceC = 15;
  201.       var priceD = 20;
  202.       var priceE = 30;
  203.  
  204.       gt = 0; 
  205.  
  206.       // Convert the values in the quantity textboxes to numbers. The 10 that
  207.       // is being passed as the second argument indicates the "radix" or the
  208.       // numeric base system that should be used when the string is being 
  209.       // interpreted. Here (and often), we work in the base 10 numeral system.
  210.       var qtyA = parseInt(qtyBoxA.value, 10);
  211.       var qtyB = parseInt(qtyBoxB.value, 10);
  212.       var qtyC = parseInt(qtyBoxC.value, 10);
  213.       var qtyD = parseInt(qtyBoxD.value, 10);
  214.       var qtyE = parseInt(qtyBoxE.value, 10);
  215.       // If each of the quantity fields are not empty, calculate the price * quantity
  216.       // for that row, place the answer in that row's total field and add the answer
  217.       // to the grand total
  218.       // NOTE: You had semicolons like this: if(); {}, which is incorrect.
  219.       // NOTE: Notice that there are + signs right in front of the total box references?
  220.       //       this forces a conversion of the string in the text to a number. Since we
  221.       //       just put a number into the cell, we know for sure it can be converted.
  222.       // NOTE: If parseInt() can't parse a number from the string provided, it returns NaN
  223.       //       (Not A Number), we can check to see if we got NaN with the isNaN() function
  224.       //       and here, we want to know if we don't have a NaN, so we prepend a ! to it 
  225.       //       (the logical NOT operator) to test the opposite of the isNaN() function result.
  226.       if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt + = +totBoxA.textContent; }
  227.       if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt + = +totBoxB.textContent; }
  228.       if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt + = +totBoxC.textContent; }
  229.       if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt + = +totBoxD.textContent; }
  230.       if (!isNaN(qtyE)) { totBoxE.textContent = qtyE * priceE; gt + = +totBoxE.textContent; }
  231.  
  232.  
  233.  
  234.       grandTot.textContent = "ZW$" + gt.toFixed(2); // Just place the answer in an element as its text
  235.  
  236.     }
  237.  
  238.     function getGrandTotal(){
  239.       calc(); // Make sure all values are up to date
  240.       alert(gt);    
  241.     }
  242.  
  243.     function reset(){
  244.       // The built-in functionality of the <input type=reset> will clear out 
  245.       // the quantity input fields automatically, but we need to manually reset
  246.       // non form field element that have been modified:
  247.       totBoxA.textContent = "";
  248.       totBoxB.textContent = "";
  249.       totBoxC.textContent = ""; 
  250.       totBoxD.textContent = "";     
  251.       totBoxE.textContent = "";
  252.       grandTot.textContent = "";
  253.     }
  254.   </script>
  255. </body>
  256. </html>
Sep 5 '19 #1
12 1059
gits
5,390 Expert Mod 4TB
fix the syntax errors starting from line 227 first and then tell exactly what problem you have with that code.
Sep 5 '19 #2
Zayn
17
i need syntax Gits. i have tried my best Gits
Sep 5 '19 #3
Zayn
17
how to fix Gits syntax error in line 227
Sep 5 '19 #4
gits
5,390 Expert Mod 4TB
look close at what you did there:

Expand|Select|Wrap|Line Numbers
  1. gt + = +totBoxA.textContent;
this is failing because you use the operator with wrong syntax - the space between the + and = invalidates it. Just fix it (these errors start in line 227) and the script will at least run - then check the outcome and tell if there is another problem.

PS: use the developer console of your browser - it will show you exactly this mentioned errors.
Sep 5 '19 #5
Zayn
17
correct me Gits. i have tried to fix..
Sep 5 '19 #6
Zayn
17
i dont have a problem with that. i need this code to print a value with dollar sign. for example. quantity 20 X price 10=$200

Expand|Select|Wrap|Line Numbers
  1. if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt + = +totBoxA.textContent; }
Sep 5 '19 #7
gits
5,390 Expert Mod 4TB
Expand|Select|Wrap|Line Numbers
  1. + =
is not equivalent to

Expand|Select|Wrap|Line Numbers
  1. +=
thats has to be fixed.
Sep 5 '19 #8
gits
5,390 Expert Mod 4TB
and you have exactly a problem with that - as you will see. the script breaks because of the invalid syntax in those lines.
Sep 5 '19 #9
Zayn
17
thankx man. its now working proper.

then to how print in dollars.
Sep 5 '19 #10
gits
5,390 Expert Mod 4TB
javascript allows to concatenate string and numbers with the addition operator (while doing dynamic type conversion for you):

Expand|Select|Wrap|Line Numbers
  1. "$ " + 100
yields you a string:

Expand|Select|Wrap|Line Numbers
  1. "$ 100"
Sep 5 '19 #11
Zayn
17
Product Part number Quantity Price Total

RAM HP100 12 ZW$5 60

I want this code to print 60 with $ sign. ZW$60
Sep 5 '19 #12
gits
5,390 Expert Mod 4TB
then just 'add' the string to your number in the right place - and of course you would need to adapt the total-calculation since it wont work the current way anymore as the textfield's content cant be parsed straight away as number anymore (you will have to take care of that explicitly).
Sep 5 '19 #13

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

Similar topics

5
by: Jay | last post by:
In an ASP.NET page I have a fairly lengthy datagrid that I need to print. Problem is that when I print sometimes the last row on that page gets cut half way through. Is there a way to print a...
1
by: Mark Smith | last post by:
Hi, I have the capture from http stream which is chunked and gzipped. I need code to de-chunk it (i.e. decode it), and then gunzip it--just like a web browser woudl do. Could someone please help...
6
by: Tark Siala | last post by:
hi i spend more time to write the code, like VB6, VB2005, SQL Stored Procedure code. any one know good Application to Automaticaly read Database (Access or SQL), then write VB Code and Stored...
4
by: not_a_commie | last post by:
I need code to peg the CPU for 10 seconds to test some background threads. Sleep obviously doesn't do that. How do I code a busy loop that won't get removed by the compiler? Thanks.
1
by: kiergaro | last post by:
I understand there is no way for the Server to see the Client printers, but I have a routine that generates a bunch of bar codes on a page and keeps it stored in a Graphics variable. Is there any...
2
by: jamiejamie | last post by:
I need to print multiple AjaxTabPanels as one print out. I'm not completely sure how to go about doing it, any help would be great. Currently it will only print the tab that is selected.
0
by: =?Utf-8?B?Sm9hbiBNYWM=?= | last post by:
Trying to make signs for demonstrations and I need to print individual letters 4 inches high. Thought I used to do it Word (Drawing tool) before I got Vista and the horror they have made out of...
3
by: gggram2000 | last post by:
I'm using visual studio 2008 with a windows based project written in C# with sql server as backend; My database stores items with their respective details. I'ved created a very basic and simple...
1
by: davidkurniawan | last post by:
Thanks b4 I need code for Hibernate, Log off, Shutdown Computer using API programming in VB.net for XP Vista and another Version Windows Operating System Is it Possibble ? david kurniawan...
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
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
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...
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...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
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...

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.