Search code examples
javascripthtmlforms

Redirect to a different page after form submission


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 ! ");
}
}

Solution

  • 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>