How to send the user between 2 html pages using JavaScript with login is correct?-CodePudding

I have been running the code of replit.com, and would be very grateful for any help. window.location.href = "veiw.html" is the main thing that isn't working, instead of bringing the user to the second html page, the page just reloads. So if there's any other way of bring the user to the other page or any other ways of solving the problem, I am willing to try anything.

//Login; verifaction//
function verifaction() {
  var user = document.getElementById("uname").value;
  var pass = document.getElementById("psw").value;
  var setn = "Example"
  var setp = "13"
  var y = document.getElementById('show');
  if(user === setn) {
    if(pass === setp) {
      window.location.href = "veiw.html"
      }
    else{alert("Incorrect Password")}}
  else{alert("Incorrect Username")}
};

#login {
  display: block;
  padding-left: auto;
  padding-right: auto;
  padding-top: auto;
  padding-bottom: auto;
  font-family: 'Economica';
  font-size: 20px;
  text-align: center;
}

<html>
  <body>
    <script src="script.js"></script>
    <br><br><br><br><br>
    <div clss="login">
      <form>
        <label for="uname"><b>Username:</b></label>
        <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
        <br><br>
    <label for="psw"><b>Password:</b></label>
    <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
        <br><br>
    <button type="submit" id="log" onclick="verifaction()">Login</button>
    <label id="re">
      <br><br>
      <input type="checkbox" name="remember">Remember me
    </label>
      </form>
    </div>
  </body>
</html>

CodePudding user response：

Your main issue is that the form submits and the page refreshes, because you didn't used Event.prefentDefault(). Therefore:

Use Event.preventDefault() to prevent the default browser form action
Stop using inline on* attributes on HTML elements. JS should be in one place only and that's its respective tag or file
Don't place <script> tags around your HTML in a render-blocking manner. Scripts (without the defer attribute) should go right before the closing </body> tag.
Use an ID to your form Element, and listen for the "submit" event.
What means "verifaction"? Name your function i.e: login(evt) and use the Event as argument
Fix your typo: make sure to use the right filename ~~veiw.html~~ I think it's: view.html
(PS: NEVER hardcode UN/PW in plain text inside your files)

Example:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Login</title>
  <style>
    #login {
      display: block;
      padding-left: auto;
      padding-right: auto;
      padding-top: auto;
      padding-bottom: auto;
      font-family: 'Economica';
      font-size: 20px;
      text-align: center;
    }
  </style>
</head>

<body>

  <div clss="login">
    <form id="form-login">
      <label for="uname"><b>Username:</b></label>
      <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
      <br><br>
      <label for="psw"><b>Password:</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
      <br><br>
      <button type="submit">Login</button>
      <label><input type="checkbox" name="remember">Remember me</label>
    </form>
  </div>


  <!-- <script> or <script src="script.js"> -->
  <script>
    // DOM helpers:
    const EL = (sel, par) => (par || document).querySelector(sel);

    // Hardcoded password and username
    // so that anyone can hack the app:
    const setn = "Example";
    const setp = "13";

    // Task:
    // Login form handler
    const EL_form = EL("#form-login");
    const EL_uname = EL("#uname");
    const EL_passw = EL("#psw");

    const login = (evt) => {

      evt.preventDefault(); // Prevent default browser action submit

      const user = EL_uname.value;
      const pass = EL_passw.value;
      const errors = [];

      if (user !== setn) errors.push("Incorrect Username");
      if (pass !== setp) errors.push("Incorrect Password");

      if (errors.length) return alert(errors.join("\n"));

      // If the function didn't return (exited) till now, we're fine!
      // Navigate to page:
      window.location.href = "view.html"
    };

    EL_form.addEventListener("submit", login);
  </script>

</body>

</html>

CodePudding user response：

The submit makes the button "Submit" the form, and as you didn't specify any URL in the <form> tag, it'll send a GET request with form data to the same URL.

What you want to do is to disable the browser's default behavior and execute the rest of your "onClick" function:

So on the HTML pass the event

<button type="submit" id="log" onclick="verifaction(event)">Login</button>

And then, you disable it:

function verifaction(event) {
  event.preventDefault()
  ...
}

Or, you could also listen to the save event that your form will receive when clicking on the save button:

<form onsubmit="verifaction(event)">
  <button type="submit" id="log">Login</button>
</form>

Full example:

//Login; verifaction//
function verifaction(event) {
  event.preventDefault()
  var user = document.getElementById("uname").value;
  var pass = document.getElementById("psw").value;
  var setn = "Example"
  var setp = "13"
  var y = document.getElementById('show');
  if (user === setn) {
    if (pass === setp) {
      window.location.href = "veiw.html"
    } else {
      alert("Incorrect Password")
    }
  } else {
    alert("Incorrect Username")
  }
};

#login {
  display: block;
  padding-left: auto;
  padding-right: auto;
  padding-top: auto;
  padding-bottom: auto;
  font-family: 'Economica';
  font-size: 20px;
  text-align: center;
}

<html>

<body>
  <script src="script.js"></script>
  <br><br><br><br><br>
  <div clss="login">
    <form>
      <label for="uname"><b>Username:</b></label>
      <input type="text" placeholder="Enter Username" name="uname" id="uname" required>
      <br><br>
      <label for="psw"><b>Password:</b></label>
      <input type="password" placeholder="Enter Password" name="psw" id="psw" required>
      <br><br>
      <button type="submit" id="log" onclick="verifaction(event)">Login</button>
      <label id="re">
      <br><br>
      <input type="checkbox" name="remember">Remember me
    </label>
    </form>
  </div>
</body>

</html>

event.preventDefault(): https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
form.onsubmit(): https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit

I believe that you are doing this as a learning exercise; In real projects, you should avoid validating data on the client-side (HTML JS) that you send to your users.

CodePudding user response：

The page is reloading because you are submitting the form and since it doesn't have action attribute set it defaults to current page. Once the form submits page refreshes and your JS doesn't run.

What you want to do is add event listener to the form for submit event, prevent the default browser behaviour and then perform your logic in JS.

Like so:

// wait for DOMContentLoaded so you can find the form in DOM
window.addEventListener("DOMContentLoaded", (event) => {
  document.querySelector("form").addEventListener("submit", (e) => {
    e.preventDefault(); // prevent default browser behaviour (submitting the form)
    verifaction(); // run whatever your logic is in this function
  });
});

Also best to remove the click listener from the button, having a submit listener on the <form> is a better practice since it will fire no mattere how the form was submitted, not just by clicking.