Menu
Hi, I have been searching high and low and I can’t seem to find an answer. I am new at JS and I have created an form and when I click the on submit button it resets all the fields. The fields are always blank after I click reset. I have been working on this for 6 hours.
[CODE]
<head>
<title>H10</title>
<script type=”text/javascript” src=”H10.js”></script>
</head>
<body>
<form name=”HO10″ onSubmit=”calculateOrder()”>
<p>Enter the number of books to order : <input type=”text” id=”numberOfBooksOrdered” size=”5″ /></p>
<p>The total order amount is <span id=”result”>zero</span></p>
<input type=”submit” name=”orderButton” value=”Order”>
<input type=”reset” name=”resetOrder” onclick=”orderReset()” value=”Reset”>
<p>Check to confirm Order: <input id=”nameOfCheckbox” type=”checkbox”></p>
</form>
</body>
here is the JS code
function calculateOrder()
{
var books=document.getElementById(‘numberOfBooksOrdered’).value;
var bookPrice = 17.99;
var discountPercentage = 0.2; // worked out from 20/100
var discountTotal = 0;
var total = 0;
if (books >= 5)
{
var bookTotal = books * bookPrice;
discountTotal = bookTotal * discountPercentage;
total = bookTotal – discountTotal;
}
else if (books < 5 && books > 0)
{
total = books * bookPrice;
}
else
{
alert (“You can’t order zero books”);
}
//replace zero with total
document.getElementById(“result”).innerHTML =(“£” + total);
// checkbok ticked
if (document.getElementById(“nameOfCheckbox”).checked == true)
{
alert (“Thanks for ordering with eBooks. :-)”);
}
}
function orderReset()
{
document.getElementById(‘result’).innerHTML = “zero”;
}
Apologies about the long code but this is what I have done. It just keeps resetting when I click Submit. I see for a millisecond that the total appears but then disappears along with the amount I put in the input text box. What am I doing wrong and why? I want to know the reason.