Buttons that have different scripts but do the same thing-CodePudding

I was trying to create a web app in which you have to log in, register etc. In my log in page I want to have buttons that can redirect me to the register page and a forgot password page, but all 3 buttons on my page do the same thing, and that is submit the form. What is the mistake that I do?

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Crisis Containment Service</title>
        <link rel="icon" href="https://www.pinclipart.com/picdir/middle/344-3442781_tornado-icon-animated-natural-disaster-png-clipart.png">
        <link rel="stylesheet" href="stylesLogin.css">
    </head>
    <body>
        <div id="slider">
            <figure>
                <img src="Images/wildfire.jpg">
                <img src="Images/furtuna.jpg">
                <img src="Images/hurricane.jpg">
                <img src="Images/landslide.jpg">
                <img src="Images/tornada.jpg">
                <img src="Images/vulcan.jpg">
                <img src="Images/inundatie.jpeg">
                <img src="Images/wildfire.jpg">
            </figure>
        </div>

        <div id="text-box">
            <h1>Login</h1>
            <form action="login.php" method="post">
                <label for="username">Username:</label><br>
                <input type="text" placeholder="Nume utilizator" name="username"><br>
                
                <label for="password">Password:</label><br>
                <input type="password" placeholder="Parola" name="password"><br>
        
                <button id="buton1" type="submit">Log in</button>
                <button id="buton2" onclick="myFunction1()">Register</button>
                <button id="buton3" onclick="myFunction2()">Forgot password?</button>
            </form>
        </div>
    </body>
    <script>
            function myFunction1() {
                location.href='registerPage.php';
            }
            function myFunction1() {
                location.href='forgotPasswordPage.php';
            }
    </script>
</html>

CodePudding user response：

Set the type attribute of the other buttons to "button". By default, buttons inside a form act as submit buttons.

<button type="button" id="buton2" onclick="myFunction1()">Register</button>
<button type="button" id="buton3" onclick="myFunction2()">Forgot password?</button>

Additionally, you named both of your functions myFunction1 so the second one will overwrite the first one.

function myFunction1() {
    location.href = 'registerPage.php';
}

function myFunction2() {
    location.href = 'forgotPasswordPage.php';
}

CodePudding user response：

I updated the file in some lines

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Crisis Containment Service</title>
    <link
      rel="icon"
      href="https://www.pinclipart.com/picdir/middle/344-3442781_tornado-icon-animated-natural-disaster-png-clipart.png"
    />
    <link rel="stylesheet" href="stylesLogin.css" />
  </head>
  <body>
    <div id="slider">
      <figure>
        <img src="Images/wildfire.jpg" />
        <img src="Images/furtuna.jpg" />
        <img src="Images/hurricane.jpg" />
        <img src="Images/landslide.jpg" />
        <img src="Images/tornada.jpg" />
        <img src="Images/vulcan.jpg" />
        <img src="Images/inundatie.jpeg" />
        <img src="Images/wildfire.jpg" />
      </figure>
    </div>

    <div id="text-box">
      <h1>Login</h1>
      <form>
        <label for="username">Username:</label><br />
        <input type="text" placeholder="Nume utilizator" name="username" />
        <br />

        <label for="password">Password:</label><br />
        <input type="password" placeholder="Parola" name="password" /><br />

        <button id="buton1" type="button" onclick="LogInFunction()">
          Log in
        </button>
        <button id="buton2" type="button" onclick="myFunction1()">
          Register
        </button>
        <button id="buton3" type="button" onclick="myFunction2()">
          Forgot password?
        </button>
      </form>
    </div>
  </body>
  <script>
    function LogInFunction() {
      location.href = "login.php";
    }
    function myFunction1() {
      location.href = "registerPage.php";
    }
    function myFunction2() {
      location.href = "forgotPasswordPage.php";
    }
  </script>
</html>

Hope it helps