I've created an order form using Java and HTML/CSS, everything was running smoothly until I decided to add some styling to the code. Now, it seems like the form doesn't reset properly post-submission; in fact, it's not responding at all. It's probably a minor issue but I can't seem to locate it even when checking the JavaScript console.
The form should display the total amount, and I also need to implement a discount that is only applicable on Mondays and Fridays.
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Order Form</title>
<link href="pl.css" rel="stylesheet">
<style>
</style>
</head>
...
Javascript
<script>
var qtyBoxA = document.getElementById('QtyA');
var qtyBoxB = document.getElementById('QtyB');
var qtyBoxC = document.getElementById('QtyC');
var qtyBoxD = document.getElementById('QtyD');
var totBoxA = document.getElementById('TotalA');
var totBoxB = document.getElementById('TotalB');
var totBoxC = document.getElementById('TotalC');
var totBoxD = document.getElementById('TotalD');
var grandTot = document.getElementById('grandTotal');
var btnGetTot = document.querySelector("input[type=button]");
var btnReset = document.querySelector("input[type=reset]");
...
</script>
</body>
</html>
@charset "UTF-8";
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);
body {
font-family: 'Open Sans', sans-serif;
font-weight: 300;
line-height: 1.42em;
color:#A7A1AE;
background-color:#1F2739;
}
h1 {
font-size:3em;
font-weight: 300;
line-height:1em;
text-align: center;
color: #4DC3FA;
}
...