Redirect to another HTML page after successfull login attempt | with JS

Question

I have created a login form. I want a JS code that:

1. If the information on the login page i.e Username and Login is correct, It will proceed to another HTML page. Simply, I want the page to redirect to another page after successfull login attempt. | With JS

2. I dont want any PHP or MySql code.

   I have tried this code but this doesnt works. On wrong information, it says Invalid information. But on correct info, it refreshes the page and there a ? is visible at te end of the url:

Html:

<form id="form" action="" method="GET">
        <div class="form-group">
          <label for="exampleInputEmail1">Email address</label>
          <input type="email"  id="email" class="form-control"  aria-describedby="emailHelp" >
          <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
        </div>
        <div class="form-group">
          <label for="exampleInputPassword1">Password</label>
          <input type="password" id="password" class="form-control" >
        </div>
         <button type="submit" class="btn btn-outline-success btn-lg shadow" onClick="auth()">Submit</button>
      </form>

JavaScript:

        function auth() {
        var email = document.getElementById("email").value;
        var password = document.getElementById("password").value;
    
        if (email === "admin@gmail.com" && password === "user") {
            location = location['href'];
            // alert("You Are a ADMIN");
    
        } else {
            alert("Invalid information");
            return;
        }
    
    }

I have also used:

window.location.replace("upload.html");

instead of:

location = location['href'];

But still does not works.

Answer 1

A couple of things here. One you're doing a GET with your form rather than doing a POST. You should change that. Second, on your JavaScript call for auth you should pass the event parameter so that the default action of the form will be stopped. Third, you should be using a relative path for your URL within your redirect. Last, You should do a window.redirect() to simulate an HTTP redirect when the function executes.

Here is the code with the updates:

<form id="form" action="post">
    <div class="form-group">
       <label for="exampleInputEmail1">Email address</label>
       <input type="email"  
              id="email" 
              class="form-control"  
              aria-describedby="emailHelp" >
        <small id="emailHelp" 
                class="form-text text-muted">
             We'll never share your email with anyone else.
        </small>
    </div>
    <div class="form-group">
       <label for="exampleInputPassword1">Password</label>
       <input type="password" id="password" class="form-control" >
    </div>
    <button type="submit" 
             class="btn btn-outline-success btn-lg shadow" 
             onClick="auth(event)">Submit</button>
 </form>
 <script>
    function auth(event) {
          event.preventDefault();

          var email = document.getElementById("email").value;
          var password = document.getElementById("password").value;

          if (email === "admin@gmail.com" && password === "user") {
               window.location.replace("/upload.html");
          } else {
              alert("Invalid information");
              return;
          }
    }
 </script>