Form not submitting on click of button click

I am working on razor pages in asp/.NET. I have created a form in my Login.cshtml file and i want to redirect to other page on submit of form & i have handled post request in my corresponding Login.cshtml.cs file. My form was working fine but when i changed some styling of my form my form is not redirecting to other page. Please help me My Login.cshtml code

@page
@section Styles {
    <link rel="stylesheet" href="~/css/Login.css"/>
    
}
@model Sora.UI.Pages.LoginModel

@{
   
     <div class=" Login">
         
            <div class="loginmodalbox gradient-custom-2   ">
                <h2 class="">Please sign in</h2>
                
                <div class="form">
                    <form  class="needs-validation"  method="post" >

                    <input name="id" id="id"  required type="text" placeholder=" "/>
                    
                    <label class="n1" htmlFor="id">name</label>
                     
                     <input name="password" id="password"  required  type="text" placeholder=" "/>
                     <label htmlFor="password">password</label>
                       <i class="bi bi-eye-slash" id="togglePassword"></i>
                    
                        <button type="submit"   class="rounded-pill font-bold">Login</button>
                  
                        <br />
                        
                    </form>
                     
                         
            <script>
        const togglePassword = document.querySelector("#togglePassword");
        const password = document.querySelector("#password");

        togglePassword.addEventListener("click", function () {
            // toggle the type attribute
            const type = password.getAttribute("type") === "password" ? "text" : "password";
            password.setAttribute("type", type);
            
            // toggle the icon
            this.classList.toggle("bi-eye");
        });

        // prevent form submit
        const form = document.querySelector("form");
        form.addEventListener('submit', function (e) {
            e.preventDefault();
        });
    </script>
            
        </div>
}

My Login.cshtml.cs file

using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;

namespace Sora.UI.Pages
{
    public class LoginModel : PageModel
    {
        public void OnGet()
        {
        }

        public async Task<IActionResult> OnPost()
        {

            /*  var id = Request.Form["id"];
              var password = Request.Form["password"];*/

            return RedirectToPage("Signup");

        }

    }
}

Signup page exist in same directory