Redirecting from a HTML button to a new page with JS-CodePudding

This is fairly simple, I'm trying to make the login button work, and redirect to a different file (placeholder.html) if what is in the email and password match the following:

I have yet to get the login button to work in the first place to redirect, and id like to keep it as a button element by using, the 'onlick=' with a function in js or an id for now.

Thank you so much for the help :) Apologies if this is a little sloppy, one of my first times asking for help here haha

Here is what I had so far, which dent work fully:

<!DOCTYPE html>
<html>

  <head>
    <title>Login page</title>
    <link href="style." rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div >
    
      <div name="login" >

        <div  style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
          Login Form
        </div>

        <form  action="login.php" method="post">

          <input type="email_" placeholder="email"/>

          <input type="password" placeholder="password"/>

          <button id="login_button">login</button>

          <p  style="font-family: Roboto, sans-serif;">Not registered? 
            <a href="register.html">Create an account</a>
          </p>

        </form>

      </div>

    </div>

  </body>

  <script type="text/javascript">

    document.getElementById("login_button").onclick = function () {
        location.href = "#placeholder";
    };

</script>

</html>

CodePudding user response：

Welcome to StackOverflow, there are a few things that I wanted to cover here as part of the answer.

The function is running onClick, the way you're using location.href is invalid though. You are redirecting to an anchor (it starts with a #), The way this is implemented in browsers is that it will redirect your scroll positioning to the top of the element with ID, if you had an element on your page with the ID of placeholder (and the page height was more than 100%) it would move the scroll position of the page, not redirect.

I believe you're looking for

location.href = "placeholder.html";

You wanted the user to be redirected based on the username and password that they enter, I will provide the solution below but before that, I wanted to say that this isn't secure, the username and password are visible inside the source code and if you planned to use this to hide important information it will not work because the code is visible to anyone who accesses the webpage, you should be using a server-side language such as NodeJS or PHP to hide that information, I assume that this is just for practise/learning though.

The first thing you'll want to do is get the username and password.

Your <input type="email_" placeholder="email"/> should be <input type="text" placeholder="email"/>. For some reason you put the type as what looks to be a typo email_ and not email but since you said the username was admin that is just text.

I would start by giving an ID to both the username and password elements.

<input type="email" id="username" placeholder="email"/>
<input type="password" id="password" placeholder="password"/>

Then inside your function you can change it to check and redirect like below

document.getElementById("login_button").onclick = function () {
  const username = document.getElementById("username").value
  const password = document.getElementById("password").value

  if (username === 'Admin' && password === 'Password123') {
    location.href = "placeholder.html";
  }
};

That will also be case-sensitive.

CodePudding user response：

There are a couple of ways that you could do this, here is a simple example:

<!DOCTYPE html>
<html>

  <head>
    <title>Login page</title>
    <link href="style." rel="stylesheet" type="text/css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div >
    
      <div name="login" >

        <div  style="font-size: 25px; font-family: Roboto; padding-bottom: 25px;">
          Login Form
        </div>

        <form  action="login.php" method="post">

          <input type="email_" placeholder="email"/>

          <input type="password" placeholder="password"/>

          <button id="login_button" onclick="login()">login</button>

          <p  style="font-family: Roboto, sans-serif;">Not registered? 
            <a href="register.html">Create an account</a>
          </p>

        </form>

      </div>

    </div>

  </body>

  <script type="text/javascript">

    function login() {
      // Login logic here
      if (loginSuccesful) {
        window.location.href = "/placeholder.html";
      }
    }

</script>

</html>