Question 359137 in Html Question posted in
Some basic documentation can be found here.

Html – 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 ! ");
}
}
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 0

    Instead of "hijacking" the submit event for validating the form input, use the invalid event. You can use the attributes min and max (among others) to decide if the value is valid. The form will only submit if the form is valid, and you can use the standard action attribute on the form to specify the URL.

    document.forms.form.addEventListener('invalid', e => {
  e.preventDefault();
  alert(`${e.target.title} Distance isn't correct !`);
}, true);
    <form name="form" action="otherpage.html" method="POST">
  <p>
    <label for="dLondon">Distance from London</label>
    <input type="number" id="dLondon" name="dLondon"
      min="3900" max="5200" title="London" required>
    <label for="dLondon">miles</label>
  </p>
  <p>
    <label for="dCanberra">Distance from Canberra</label>
    <input type="number" id="dCanberra" name="dCanberra"
      min="5500" max="6700" title="Canberra" required>
    <label for="dCanberra">miles</label>
  </p>
  <p>
    <label for="dOttawa">Distance from Ottawa</label>
    <input type="number" id="dOttawa" name="dOttawa"
      min="6700" max="9300" title="Ottawa" required>
    <label for="dOttawa">miles</label>
  </p>
  <input type="submit" value="Submit">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search