Hi, I want to validate the input field 'putime' in the form because even if the 'putime' input box is empty the result is calculated and nightSurcharges is also added to the cost. So I want to validate 'putime' when it is empty.
And here is the form
Code:
function TaxiFare() {
// calculates taxi fare based upon miles travelled
// and the hour of the day in military time (0-23).
var baseFare = 14;
var costPerMile = 7.00;
var nightSurcharge = 20.50; // 9pm to 6am, every night //its flat 20.50 and not per mile
var milesTravelled = Number(document.getElementById("miles").value) || 0;
if ((milesTravelled < 1) || (milesTravelled > 200)) {
alert ("You must enter 1 - 200 miles");
document.getElementById("miles").focus();
return false;
}
var pickupTime = Number(document.getElementById("putime").value) || 0;
if ((pickupTime < 0) || (pickupTime > 23) || (pickupTime==null)) { // note the hours are 0-23. There is no 24 hour, midnight is 0 hours
alert ("The time must be 0-23 hours");
document.getElementById("putime").focus();
return false;
}
var cost = baseFare + (costPerMile * milesTravelled);
// add the nightSurcharge to the cost if it is after
// 8pm or before 6am
if (pickupTime >= 21 || pickupTime < 6) {
cost += nightSurcharge;
}
document.getElementById("result").innerHTML = "Your taxi fare is: $. " + cost.toFixed(2);
}
Code:
<form> Miles for Journey <input type="text" id = "miles" required><br> Pickup Time <input type = text id = "putime" required><br><br> <input type="button" value="Calculate Fare" onclick="TaxiFare()"> <input type="reset" value="Clear"><br><br> <span id = "result"></span> </form>
Comment