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

using javascript, calculate total, clear form and validate the form

P: 17
Expand|Select|Wrap|Line Numbers
  1. <table style="width:50%">
  2. <tr>
  3.     <th>Product</th>
  4.     <th>Part Number</th> 
  5.     <th>Quantity</th>
  6.     <th>Unit Price</th>
  7.     <th>Subtotal</th> 
  8. <tr>
i want to calculate total of 5 items by clicking a button using javascript.
2 Weeks Ago #1
Share this Question
Share on Google+
4 Replies


gits
Expert Mod 5K+
P: 5,318
what have you done so far to achieve this?
2 Weeks Ago #2

P: 17
Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <script type="text/javascript">
  5.     var qtyBoxA = document.getElementById('quantityA');
  6.     var qtyBoxB = document.getElementById('quantityB');
  7.     var qtyBoxC = document.getElementById('quantityC');
  8.     var qtyBoxD = document.getElementById('quantityD');
  9.     var qtyBoxE = document.getElementById('quantityE');
  10.  
  11.     var subBoxA = document.getElementById('subtotalA');
  12.     var subBoxB = document.getElementById('subtotalB');
  13.     var subBoxC = document.getElementById('subtotalC');
  14.     var subBoxD = document.getElementById('subtotalD');
  15.     var subBoxE = document.getElementById('subtotalE');
  16.  
  17.     var CalculateTotal = document.getElementById('subtotalF');
  18.     var btnGetTot = document.querySelector("input[type=button]");
  19.     var btnReset = document.querySelector("input[type=reset]");    
  20.  
  21.  
  22.  
  23.     // Set up event handling in JavaScript, not HTML.
  24.     qtyBoxA.addEventListener("change", calc);
  25.     qtyBoxB.addEventListener("change", calc);
  26.     qtyBoxC.addEventListener("change", calc);
  27.     qtyBoxD.addEventListener("change", calc);
  28.     qtyBoxE.addEventListener("change", calc);
  29.     btnGetTotal.addEventListener("click", getCalculate);
  30.     btnReset.addEventListener("click", reset);/
  31.  
  32.     var gt = null; // Will hold the grand total
  33.  
  34.     function calc() {
  35.  
  36.       var priceA = 5;
  37.       var priceB = 10;
  38.       var priceC = 15;
  39.       var priceD = 20;
  40.       var priceE = 30;
  41.       gt = 0; 
  42.  
  43.       var qtyA = parseInt(qtyBoxA.value, 10);
  44.       var qtyB = parseInt(qtyBoxB.value, 10);
  45.       var qtyC = parseInt(qtyBoxC.value, 10);
  46.       var qtyD = parseInt(qtyBoxD.value, 10);
  47.       var qtyE = parseInt(qtyBoxE.value, 10);
  48.  
  49.       if (!isNaN(qtyA)) { subBoxA.textContent = qtyA * priceA; gt += +subBoxA.textContent; }
  50.       if (!isNaN(qtyB)) { subBoxB.textContent = qtyB * priceB; gt += +subBoxB.textContent; }
  51.       if (!isNaN(qtyC)) { subBoxC.textContent = qtyC * priceC; gt += +subBoxC.textContent; }
  52.       if (!isNaN(qtyD)) { subBoxD.textContent = qtyD * priceD; gt += +subBoxD.textContent; }
  53.       if (!isNaN(qtyE)) { subBoxE.textContent = qtyE * priceE; gt += +subBoxE.textContent; }
  54.  
  55.  
  56.       CalculateTotal.textContent = gt.toFixed(2);
  57.  
  58.     }
  59.  
  60.     function getCalculate(){
  61.       calc(); 
  62.       alert(gt);    
  63.     }
  64.       function reset(){
  65.  
  66.       subBoxA.textContent = "";
  67.       subBoxB.textContent = "";
  68.       subBoxC.textContent = ""; 
  69.       subBoxD.textContent = "";
  70.       subBoxE.textContent ="";
  71.       CalculateTotalTot.textContent = "";
  72.     }
  73.  
  74. </script>
  75. </head>
  76. <style>
  77. body {  
  78.   background-color:grey;
  79. }
  80. th{
  81.  
  82.   text-align: left;
  83. }
  84.  
  85. div{
  86.  
  87.   text-align: right;
  88.  
  89.   }
  90.  
  91.  .large{  
  92.          height:100px;
  93.          width: 170px;
  94.  
  95.  }
  96.   table{
  97.  
  98.   font-style: normal;
  99.   border-collapse: collapse;
  100.   }
  101. </style>
  102. <body>
  103. <form name="myForm" action="/submit.php" onsubmit="return validateForm()" method="post">
  104. <h1 style="text-align: left">Order Form</h1>
  105. <table>
  106.  
  107. <tr>
  108. <td>Name</td>
  109. <td><input type="text" name="fname" placeholder="Zayn" >
  110. </td>
  111.  
  112. <td> Surname</td>
  113. <td><input type="text" name="fsurname" placeholder="Saidi"></td>
  114. </tr>
  115.  
  116. <tr>
  117. <td>Email</td>
  118. <td><input type="text" name="fmail" placeholder="zaynsaidi@gmail.com"></td>
  119. <td>Cell Number</td>
  120. <td><input type="text" name="fcellnumber" placeholder="07712394400"></td>
  121. </tr>
  122. <tr>
  123. <td>Address</td>
  124. <td><input type="text" name="faddress" placeholder="" class="large"></td></div>
  125. </tr>
  126. <table>
  127. </tr><br><br>
  128. <form>
  129. <table style="width:50%">
  130. <tr class="wrapper">
  131.     <th>Product</th>
  132.     <th>Part Number</th> 
  133.     <th>Quantity</th>
  134.     <th>Unit Price</th>
  135.     <th>Subtotal</th>
  136. </tr>
  137. <tbody>    
  138. <tr>
  139.     <td>RAM</td>
  140.     <td>HP100</td> 
  141.     <td><input type="text" id="quantityA" maxlength="7" placeholder="60" ></td>
  142.     <td>ZW$5</td>
  143.     <td><input type="text" id="subtotalA" size="6" placeholder="$300" ></td>
  144.   </tr>
  145.  
  146.   <tr>
  147.     <td>Speaker</td>
  148.     <td>HP200</td> 
  149.     <td><input type="text" id="quantityB" maxlength="7" placeholder="65" ></td>
  150.     <td>ZW$10</td>
  151.     <td><input type="text" id="subtotalB" size="6"placeholder="$650" ></td>
  152.   </tr>
  153.  
  154.   <tr>
  155.     <td>Power Supply</td>
  156.     <td>HP300</td> 
  157.     <td><input type="text" id="QuantityC" placeholder="10" ></td>
  158.     <td>ZW$15</td>
  159.     <td><input type="text" id="subtotalC" size="6" placeholder="$150" ></td>
  160.   </tr>
  161.   <tr>
  162.     <td>HDD</td>
  163.     <td>HP400</td> 
  164.     <td><input type="text" id="quantityD" placeholder="20" ></td>
  165.     <td>ZW$20</td>
  166.     <td><input type="text" id="subtotalD" size="6" placeholder="$220" ></td>
  167.   </tr>
  168.   <tr>
  169.     <td>Motherboard</td>
  170.     <td>HP500</td> 
  171.     <td><input type="text" id="quantityE" placeholder="5" ></td>
  172.     <td>ZW$30</td>
  173.     <td><input type="text" id="subtotalE" size="6" placeholder="$150"></td>
  174.     </tr>
  175.     <tr>
  176.  
  177.     <th colspan="4"><div class="header"  >Total</div></th>
  178.     <td><input type="text" id="subtotalF" size="6" placeholder="$900"></td>
  179.     </tr>
  180.  
  181. </table>
  182. </form>
  183. <strong>Payment Details</strong><br>
  184. <strong>Methods</strong>
  185. <table>
  186. <tr>
  187. <td><input type="radio" name="gender" value="Visa" checked>Visa</td>
  188. <td>Card Number</td>
  189. <td><input type="text" name="fcardnumber" maxlength="30" placeholder="6079 9500 0013 7538">
  190. <td>Expiry Date</td>
  191. <td><input type="text" name="fexpirydate" placeholder="22/08/2030" maxlength="30">
  192. <tr/>
  193. <tr>
  194. <td><input type="radio" name="gender" value="Cash" checked>Cash</td>
  195. </tr>
  196. <tr>
  197. <td><input type="radio" name="gender" value="Ecocash" checked>Ecocash</td>
  198. </tr>
  199. <tr>
  200. <td><input type="radio" name="gender" value="Swipe" checked>Swipe</td>
  201. </tr><br><br><br>
  202. <table>
  203. <td>Delivery Address<br/><br/><br/></td>
  204. <td><input type="text" name="fdeliveryaddress" placeholder=""></td>
  205. </tr>
  206. </tr><br><br>
  207. <table>
  208. <tr>
  209. <td colspan="2" align="left" >
  210. <input type="button" name="claculate_form" value="Calculate" onclick="this.form.calculate();">
  211. <input type="reset" name="reset_form" value="Clear Form" onclick="this.form.reset();">
  212. </tr>
  213. <tbody>
  214. </table>
  215.  
  216.  
  217. </body>
  218. </html>
2 Weeks Ago #3

P: 17
its not executing.. help me guys
2 Weeks Ago #4

gits
Expert Mod 5K+
P: 5,318
well - you have several problems in that code:
  1. you try to access the DOM before its fully loaded
  2. you have syntax error in Line 30
  3. in line 7 u try to access a node that cannot exist - id is case sensitive
  4. you try to call a function in line 210 - that function doesnt exist in the scope of the form from where you want to call it
  5. might be more issues - was only crossreading over the bunch of code ...

use the browser's developer tools and fix all the errors that show up in the console first.
2 Weeks Ago #5

Post your reply

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