Code:
<!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>
Comment