Link inside form referring to the action of the form instead of the link

I am trying to make the link inside the form go to signup2.php. Instead it is going to loginprocess.php. Is there any way to do this by keeping the signup link inside the form?

 <form action = "loginprocess.php" method = "post" enctype="multipart/form-data">
        <h1>Login</h1>
    
        <p> Username:<input type = "text" name = "username"></p>
    </br>
        <p> Password:<input type = "password" name = "password"></p>
    </br>
        <input class = "submit" type = "submit" name = "submit" value = "Login">
        <a href = "signup2.php"><button>Don't have an account? Sign Up</button></a>

</form>

Answer

Buttons inside forms are automatically treated as submit buttons as is apparent in this post. If you want to alter this functionality, there are a few options.

• Remove the button from the form altogether; the link will suffice if you are doing class-based styling
• Override the default form-button behaviour by changing the button type

<button type="button">Don't have an account? Sign Up</button>

• You can choose which buttons submit the form using Javascript:
  • Change the form onsubmit value
  • Manually submit the form by targeting the submit button

<form action="loginprocess.php" method="post" enctype="multipart/form-data" onsubmit="return false;"></form>

const submit_button = document.querySelector('.submit');
const form = document.querySelectors('form')
submit_button.addEventListener('click', () => form.submit())