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

Html – How to move to another created page after the form validation is over?

I have created a HTML form and i wrote the validation logic in the file script.js.
After the form is successfully validated and the condition is met, it should take the user to the next page.

But it is not happening as expected.

All these three files are in the same folder

File: Script.js

var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;

function submit() {
  if (username.length > 0 && pass.length > 0) {
    if (username === "Abi" && pass.length == 5) {
      window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
      return true;
    }
  }
  return false;
}

File: index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>RECIPE</title>
    <link href="index.css" rel="stylesheet" />
  </head>

  <body>
    <div class="container">
      <form name="login" onsubmit="return submit()" method="get">
        <div>
          <label for="name">Name</label>
          <input type="text" id="name" required />
        </div>

        <div>
          <label for="pass">password</label>
          <input type="password" id="pass" required />
        </div>

        <button type="submit" id="but">Login</button>
      </form>
    </div>
  </body>
  <script src="script.js"></script>
</html>

File: index1.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>First Page</title>
  </head>
  <body>
    <h1>Welcome Beautiful!</h1>
  </body>
</html>
Tags:

4

Answers


  1. 0

    You should use window.location.href instead of window.open. because it is more reliable.

    Try this

    window.location.href = "file:///C:/Users/abiji/Desktop/RapidAPI/index1.html";

    instead of

    window.open("file:///C:/Users/abiji/Desktop/RapidAPI/index1.html");
    Login or Signup to reply.
  2. 0

    Move

    var username = document.getElementById("name").value;
var pass = document.getElementById("pass").value;

    to the submit function. The way you did that it is evaluated when the script is loaded and not when you submit the form. Therefore the length remains 0 no matter what you type in.

    Sidenote: it is good practice to use === to check equality instead of ==.

    Login or Signup to reply.
  3. 0

    First things first, there is built-in submit function, which triggers after form submitting. You named your function as "submit", which results in duplicate and uncallable. I named it as "submitEvent", and it works now.

    Secondly, If html files are in the same directory, you can simply call them like "./index1.html". Don’t give the full path, it is not a good practice.

    Thirdly, you created "username" and "pass" parameters out of scope. They will be created after page load, they will be empty spaces and everytime you submit, nothing will change. Create these parameters inside the function that you will create. In my case, it is submitEvent and I create these parameters in its scope.

    When you use "onsubmit" event for html form tag, you simply use the built-in submit function, which returns a boolean value. In your example, you return true or false based on your conditions. Username "Abi" and any password with the length of 5 can pass your conditions and successfully redirects.

    function submitEvent() {
  var username = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;
  if (username.length > 0 && pass.length > 0) {
    if (username === "Abi" && pass.length == 5) {
      window.open("./index1.html");
      return true;
    }
  }
  return false;
}
    Login or Signup to reply.
  4. 0

    1- Move the <script src="script.js"></script> tag to the end of the HTML body, just before the closing tag.

    2- Update your submit function in script.js as follows:

    function submit(event) {
  event.preventDefault();

  var username = document.getElementById("name").value;
  var pass = document.getElementById("pass").value;

  if (username === "Abi" && pass.length === 5) {
    window.location.href = "index1.html";
    return true;
  }

  return false;
}

    These changes ensure that the form validation is properly performed and the page is redirected to index1.html only if the conditions are met.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search