How do would you go about redirecting to different page when a user correctly fills a form? I have tried two different methods: location.href = "otherpage.html";
and location.replace("otherpage.html")
however they aren't working.
Adding window.
in front isn't changing anything either.
<!DOCTYPE html>
<head>
<script src="javascript/srcipt.js"></script>
</head>
<html>
<form name="form" onsubmit="Distance();" method="POST">
<p>
<label for="dLondon">Distance from London</label>
<input type="number" id="dLondon" name="dLondon" min="0" required>
<label for="dLondon">miles</label>
</p>
<p>
<label for="dCanberra">Distance from Canberra</label>
<input type="number" id="dCanberra" name="dCanberra" min="0" required>
<label for="dCanberra">miles</label>
</p>
<p>
<label for="dOttawa">Distance from Ottawa</label>
<input type="number" id="dOttawa" name="dOttawa" min="0" required>
<label for="dOttawa">miles</label>
</p>
<input type="submit" value="Submit">
</form>
</html>
function Distance() {
let dLondon = document.forms["form"]["dLondon"].value;
let dOttawa = document.forms["form"]["dOttawa"].value;
let dCanberra = document.forms["form"]["dCanberra"].value;
if ((3900 <= dLondon) && ( dLondon <= 5200)) {
if ((5500 <= dCanberra) && (dCanberra <= 6700)) {
if ((6700 <= dOttawa) && (dOttawa <= 9300)) {
location.href = "otherpage.html";
}
else {
alert("Ottawa Distance isn't correct !");
}
}
else {
alert("Canberra distance isn't correct !");
}
}
else {
alert("London Distance isn't correct ! ");
}
}
I've found the solution, I just had to change onsbumit="Distance()";
to obsubmit="return Distance();
in html and add return false;
at the end of the Distance()
function.
function Distance() {
let dLondon = document.forms["form"]["dLondon"].value;
let dToronto = document.forms["form"]["dToronto"].value;
let dCanberra = document.forms["form"]["dCanberra"].value;
let conditionLondon = false;
let conditionCanberra = false;
let conditionToronto = false;
if ((3900 <= dLondon) && (dLondon <= 5200)) {
conditionLondon = true;
}
else {
alert("London Distance isn't correct ! ");
}
if ((5500 <= dCanberra) && (dCanberra <= 6700)) {
conditionCanberra = true;
}
else {
alert("Canberra distance isn't correct !");
}
if ((6700 <= dToronto) && (dToronto <= 9300)) {
conditionToronto = true;
}
else {
alert("Toronto Distance isn't correct !");
}
if (conditionLondon && conditionCanberra && conditionToronto) {
window.location.href = "mypage.html";
}
return false;
}
<form name="form" onsubmit="return Distance();" method="POST">
<p>
<label for="dLondon">Distance from London</label>
<input type="number" id="dLondon" name="dLondon" min="0" required>
<label for="dLondon">miles</label>
</p>
<p>
<label for="dCanberra">Distance from Canberra</label>
<input type="number" id="dCanberra" name="dCanberra" min="0" required>
<label for="dCanberra">miles</label>
</p>
<p>
<label for="dToronto">Distance from Toronto</label>
<input type="number" id="dToronto" name="dToronto" min="0" required>
<label for="dToronto">miles</label>
</p>
<input type="submit" value="submit">
</form>