How to submit one form when two forms present on page

Question

I currently have a login page that allows for someone to signup if they don't have an account already. The signup form is an overlay added to the page via a partial view and thus not a nested form. This however means that there are still two forms on one page and if I try to log in, I am prevented from doing so as my signup form fields are not filled in. How am I able to post my log in form while bypassing the signup form?

Login view:

@page "/login"
@model Login
@{
    Layout = "_LoginRegisterLayout";
}
@section Links {
    <link rel="stylesheet" href="~/styles/login.css" type="text/css" />
    <Link rel="stylesheet" href="~/styles/SignupPartial.css" type="text/css" />
}
<div>
    <div class="header-logged-out">
        <div class="centered-container">
            <a class="header-logo" href="/">
                <img src="~/images/hoook_round_blue.png" alt="hoook header logo" height="50px" width="50px" />
            </a>
        </div>
    </div>
    <div>
        <div class="login-content">
            <div class="login-form-header">
                <h1>Sign in to Hoook</h1>
            </div>
            <div class="login-form-body">
                <form method="post" asp-page="Login">
                    <label asp-for="Email">Email Address</label>
                    <input type="email" asp-for="Email" class="form-input" autofocus autocomplete="email" />
                    <div class="login-position-relative">
                        <label asp-for="Password">Password</label>
                        <input type="password" asp-for="Password" class="form-input" autocomplete="current-password" />
                        <button value="log-in" type="submit" class="submit-btn">Sign in</button>
                        <a class="login-position-absolute login-link" href="">Forgot Password?</a>
                    </div>
                </form>
            </div>
            <div class="login-position-relative login-spacer">
                <span class="login-or">or</span>
            </div>
            <div class="login-create-account">
                <p>New to Hoook? <a href="" class="login-link" id="login-create-account">Create an account.</a></p>
            </div>
        </div>
    </div>
</div>
<partial name="_SignupPartial" model="@(new Signup())" />

SignupPartial added via partial tag above:

@model Signup
<div class="signup-overlay signup-hide">
    <div class="signup-spacer"></div>
    <div class="signup-content">
        <div class="content-control signup-position-relative">
            <div class="signup-header ">Sign Up</div>
            <p class="signup-slogan">It's easy and free to start!</p>
            <svg class="signup-exit" xmlns="http://www.w3.org/2000/svg" viewBox="-6 -6 24 24" width="24" fill="currentColor"><path d="M7.314 5.9l3.535-3.536A1 1 0 1 0 9.435.95L5.899 4.485 2.364.95A1 1 0 1 0 .95 2.364l3.535 3.535L.95 9.435a1 1 0 1 0 1.414 1.414l3.535-3.535 3.536 3.535a1 1 0 1 0 1.414-1.414L7.314 5.899z"></path></svg>
        </div>
        <div class="message-control">
            <p class="error-message"></p>
        </div>
        <div class="signup-form content-control">
            <form method="post" asp-page="Index" id="signupForm">
                <input type="hidden" asp-for="Token" />
                <input type="text" asp-for="FirstName" class="signup-input signup-form-control" placeholder="First name" required autofocus />
                <input type="text" asp-for="LastName" class="signup-input signup-form-control" placeholder="Last name" required />
                <input type="email" asp-for="Email" class="signup-input signup-form-control" placeholder="Email address" required />
                <input type="password" asp-for="Password" class="signup-input signup-form-control" autocomplete="new-password" placeholder="New password" required minlength="8" />
                <input type="password" asp-for="Confirmation" class="signup-input" autocomplete="new-password" placeholder="Confirm password" required minlength="8" />
                <div class="content-control btn-control">
                    <button value="sign-up" class="submit-btn" type="submit">Sign Up</button>
                </div>
                <input type="hidden" id="returnUrl" name="returnUrl" value='@(ViewContext.ActionDescriptor.AttributeRouteInfo.Template)' />    
            </form>
        </div>
    </div>
</div>

Answer 1

The issue stemmed from the fact that my signup form button used the same button class name to submit the form via javascript since I have added reCAPTCHA to the signup. Therefore every time I submit the login form, my javascript was catching it and preventing the submission. This can be seen in the following snippet where the submitBtn element is capturing the login submit button. The solution was to change the class name for the querySelector to only target the signup form button.

_LoginRegisterLayout:

    <script>
        grecaptcha.ready(function() {
            let submitBtn = document.querySelector(".submit-btn");
            let form = document.querySelector("#signupForm");
            submitBtn.addEventListener("click", function(event) {
                event.preventDefault();
                grecaptcha.execute("@captcha.reCaptchaSiteKey", {action: "signupForm"}).then(function(token) {
                    if (inputValidationFunction()) {
                        document.getElementById("Token").value = token;
                        form.requestSubmit(submitBtn);
                    }
                });
            });
        });
    </script>