Expand|Select|Wrap|Line Numbers
- <!DOCTYPE html> <!-- The DOCTYPE tells the browser what version of HTML it should be expecting. -->
- <html>
- <head>
- <meta charset="UTF-8">
- <title>Order Form</title>
- <!-- To reference a single stylesheet, use the link element: -->
- <link href="css/OrderForm.css" rel="stylesheet">
- <style>
- /* Make all the input elements that have an id that starts with Qty
- be 5 characters wide. (Now size=5 isn't needed in the HTML 3 times) */
- input[id^=Qty] { width:5em; }
- /* The first <td> in each row should be 80px wide. Now we don't have to
- clutter up the HTML with this and we don't have to repeat it 3 times. */
- td:first-child { width:80px; }
- body {
- background-color:grey;
- }
- th,td{
- border-collapse: collapse;
- text-align: left;
- }
- </style>
- </head> <!-- You didn't close your <head> tag! -->
- <body>
- <form name="myForm" action="/submit.php" onsubmit="return validateForm()" method="post">
- <h1 style="text-align: left">Order Form</h1>
- <table style="width:50%">
- <tr>
- <td><strong>Name</strong></td>
- <td><input type="text" name="fname" placeholder="Zayn" >
- </td>
- <td><strong>Surname</strong></td>
- <td><input type="text" name="fsurname" placeholder="Saidi"></td>
- </tr>
- <tr>
- <td><strong>Email</strong></td>
- <td><input type="text" name="fmail" placeholder="zaynsaidi@gmail.com"></td>
- <td><strong>Cell Number</strong></td>
- <td><input type="text" name="fcellnumber" placeholder="07712394400"></td>
- </tr>
- <tr>
- <td><strong>Address</strong><br/><br/><br/></td>
- <td><textarea name="Address" rows="4" cols="30"> </textarea></td>
- </tr><br><br>
- </tr>
- <table>
- </tr><br><br>
- <form>
- <table border="1" style="width:50%" >
- <tr>
- <th>Product</th>
- <th>Part Number</th>
- <th>Quantity</th>
- <th>Price</th>
- <th>Total</th>
- </tr>
- <tr>
- <td>RAM</td>
- <td>HP100</td>
- <td ><input type="text" id="QtyA" size="15" ></td>
- <td>ZW$5.00</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <td size="15" style="background-color:white" id="TotalA"></td>
- </tr>
- <tr>
- <td>SPEAKER</td>
- <td>HP200</td>
- <td><input type="text" id="QtyB"></td>
- <td>ZW$10.00</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <td style="background-color:white" id="TotalB"></td>
- </tr>
- <tr>
- <td>POWER SUPPLY</td>
- <td>HP300</td>
- <td><input type="text" id="QtyC"></td>
- <td>ZW$15.00</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <td style="background-color:white" id="TotalC"></td>
- </tr>
- <tr>
- <td>HDD</td>
- <td>HP400</td>
- <td><input type="text" id="QtyD"></td>
- <td>ZW$20.00</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <td style="background-color:white" id="TotalD"></td>
- </tr>
- <tr>
- <td>MOTHERBOARD</td>
- <td>HP500</td>
- <td><input type="text" id="QtyE"></td>
- <td>ZW$30.00</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <td style="background-color:white" id="TotalE" ></td>
- </tr>
- <tr>
- <td colspan="4">TOTAL</td>
- <!-- You shouldn't be putting results of calculations into input fields
- when you don't want the user to modify the data. Just place it into
- an elmeent as its .textContent -->
- <!-- You need to have this cell span over the remaining columns of the
- table, so colspan=4 needs to be added. -->
- <td style="background-color:white" id="grandTotal" ></td>
- </tr>
- </table><br>
- <!-- Your form doesn't actually submit data anywhere, so you shouldn't
- have a submit button. A regular button will do. -->
- <strong>Payment Details</strong><br>
- <strong>Methods</strong>
- <table>
- <tr>
- <td><input type="radio" name="gender" value="Visa" checked><strong>Visa</strong></td>
- <td><strong>Card Number</strong></td>
- <td><input type="text" name="fcardnumber" maxlength="30" placeholder="6079 9500 0013 7538">
- <td><strong>Expiry Date</strong></td>
- <td><input type="text" name="fexpirydate" placeholder="22/08/2030" maxlength="30">
- <tr/>
- <tr>
- <td><input type="radio" name="gender" value="Cash" checked><strong>Cash</strong></td>
- </tr>
- <tr>
- <td><input type="radio" name="gender" value="Ecocash" checked><strong>Ecocash</strong></td>
- </tr>
- <tr>
- <td><input type="radio" name="gender" value="Swipe" checked><strong>Swipe</strong></td>
- </tr><br><br><br>
- <table>
- <tr>
- <td><strong>Delivery Address</strong><br/><br/><br/></td>
- <td><textarea name="Address" rows="4" cols="30"> </textarea></td>
- </tr><br><br>
- <table>
- </tr>
- </tr>
- <tr>
- </table>
- <td><input type="button" value="Calculate">
- <input type="reset" value="Reset"></td>
- </tr>
- </form>
- <script>
- // Get references to the HTML elements that you'll be working with
- var qtyBoxA = document.getElementById('QtyA');
- var qtyBoxB = document.getElementById('QtyB');
- var qtyBoxC = document.getElementById('QtyC');
- var qtyBoxD = document.getElementById('QtyD');
- var qtyBoxE = document.getElementById('QtyE');
- var totBoxA = document.getElementById('TotalA');
- var totBoxB = document.getElementById('TotalB');
- var totBoxC = document.getElementById('TotalC');
- var totBoxD = document.getElementById('TotalD');
- var totBoxE = document.getElementById('TotalE');
- var grandTot = document.getElementById('grandTotal');
- var btnGetTot = document.querySelector("input[type=button]");
- var btnReset = document.querySelector("input[type=reset]");
- // Set up event handling in JavaScript, not HTML.
- qtyBoxA.addEventListener("change", calc);
- qtyBoxB.addEventListener("change", calc);
- qtyBoxC.addEventListener("change", calc);
- qtyBoxD.addEventListener("change", calc);
- qtyBoxE.addEventListener("change", calc);
- btnGetTot.addEventListener("click", getGrandTotal);
- btnReset.addEventListener("click", reset);
- var gt = null; // Will hold the grand total
- function calc() {
- var priceA = 5;
- var priceB = 10;
- var priceC = 15;
- var priceD = 20;
- var priceE = 30;
- gt = 0;
- // Convert the values in the quantity textboxes to numbers. The 10 that
- // is being passed as the second argument indicates the "radix" or the
- // numeric base system that should be used when the string is being
- // interpreted. Here (and often), we work in the base 10 numeral system.
- var qtyA = parseInt(qtyBoxA.value, 10);
- var qtyB = parseInt(qtyBoxB.value, 10);
- var qtyC = parseInt(qtyBoxC.value, 10);
- var qtyD = parseInt(qtyBoxD.value, 10);
- var qtyE = parseInt(qtyBoxE.value, 10);
- // If each of the quantity fields are not empty, calculate the price * quantity
- // for that row, place the answer in that row's total field and add the answer
- // to the grand total
- // NOTE: You had semicolons like this: if(); {}, which is incorrect.
- // NOTE: Notice that there are + signs right in front of the total box references?
- // this forces a conversion of the string in the text to a number. Since we
- // just put a number into the cell, we know for sure it can be converted.
- // NOTE: If parseInt() can't parse a number from the string provided, it returns NaN
- // (Not A Number), we can check to see if we got NaN with the isNaN() function
- // and here, we want to know if we don't have a NaN, so we prepend a ! to it
- // (the logical NOT operator) to test the opposite of the isNaN() function result.
- if (!isNaN(qtyA)) { totBoxA.textContent = qtyA * priceA; gt + = +totBoxA.textContent; }
- if (!isNaN(qtyB)) { totBoxB.textContent = qtyB * priceB; gt + = +totBoxB.textContent; }
- if (!isNaN(qtyC)) { totBoxC.textContent = qtyC * priceC; gt + = +totBoxC.textContent; }
- if (!isNaN(qtyD)) { totBoxD.textContent = qtyD * priceD; gt + = +totBoxD.textContent; }
- if (!isNaN(qtyE)) { totBoxE.textContent = qtyE * priceE; gt + = +totBoxE.textContent; }
- grandTot.textContent = "ZW$" + gt.toFixed(2); // Just place the answer in an element as its text
- }
- function getGrandTotal(){
- calc(); // Make sure all values are up to date
- alert(gt);
- }
- function reset(){
- // The built-in functionality of the <input type=reset> will clear out
- // the quantity input fields automatically, but we need to manually reset
- // non form field element that have been modified:
- totBoxA.textContent = "";
- totBoxB.textContent = "";
- totBoxC.textContent = "";
- totBoxD.textContent = "";
- totBoxE.textContent = "";
- grandTot.textContent = "";
- }
- </script>
- </body>
- </html>