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 === "[email protected]" && 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.

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 === "[email protected]" && 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.

• javascript
• html
• authentication

Share Improve this question Follow edited Apr 22, 2021 at 19:41 Kumail Rizvi asked Apr 22, 2021 at 19:29 Kumail RizviKumail Rizvi 2311 gold badge22 silver badges66 bronze badges 1

• Now to be honest here, you really shouldn't be putting authentication like this in your web pages. You're laying out the user and password right there in the code along with the redirect which you're trying to protect. You really should have some server side validation here, and some kind of protection on the target page to stop someone from just navigating there. – Chris Commented Apr 22, 2021 at 19:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

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 === "[email protected]" && password === "user") {
               window.location.replace("/upload.html");
          } else {
              alert("Invalid information");
              return;
          }
    }
 </script>