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

Question

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>

Don't put a submit button inside the link. It's submitting the form. — Barmar, Jan 05 '21 at 01:20

score 0 · Accepted Answer · answered Jan 05 '21 at 02:16

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())

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

1 Answers1