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

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

P: 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>
1 Week Ago #1
Share this Question
Share on Google+
12 Replies


gits
Expert Mod 5K+
P: 5,318
fix the syntax errors starting from line 227 first and then tell exactly what problem you have with that code.
1 Week Ago #2

P: 17
i need syntax Gits. i have tried my best Gits
1 Week Ago #3

P: 17
how to fix Gits syntax error in line 227
1 Week Ago #4

gits
Expert Mod 5K+
P: 5,318
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.
1 Week Ago #5

P: 17
correct me Gits. i have tried to fix..
1 Week Ago #6

P: 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; }
1 Week Ago #7

gits
Expert Mod 5K+
P: 5,318
Expand|Select|Wrap|Line Numbers
  1. + =
is not equivalent to

Expand|Select|Wrap|Line Numbers
  1. +=
thats has to be fixed.
1 Week Ago #8

gits
Expert Mod 5K+
P: 5,318
and you have exactly a problem with that - as you will see. the script breaks because of the invalid syntax in those lines.
1 Week Ago #9

P: 17
thankx man. its now working proper.

then to how print in dollars.
1 Week Ago #10

gits
Expert Mod 5K+
P: 5,318
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"
1 Week Ago #11

P: 17
Product Part number Quantity Price Total

RAM HP100 12 ZW$5 60

I want this code to print 60 with $ sign. ZW$60
1 Week Ago #12

gits
Expert Mod 5K+
P: 5,318
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).
1 Week Ago #13

Post your reply

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