Form input values not received in Javascript variables

Question

I am working on a node.js project and i'm currently working on the login and sign up pages . But somehow when i try to access the values of the text inputs of the form in the console it seems the values are not stored in the variables assigned to the various event listeners i had setup . There arent any errors in the console nor do i get any warnings in VS Code.

Here is the js file retrieving the form values:

```//set up event listeners
const form = document.getElementById("sign_up")
const username = document.getElementById("user_name").value
const mail = document.getElementById("mail").value
const residence = document.getElementById("residence").value
const password = document.getElementById("password").value
const repeat  = document.getElementById("repeat").value

//retrieve form data
form.onsubmit=async (event)=>{
    event.preventDefault()
    console.log("the form works!")

    //check if the passwords match
    if (password !== repeat){
        alert("passwords do not match")
    }else{
        //retrieve the data and submit form
        const result = await fetch('/api/register',{
            method: 'POST',
            headers:{
                'Content-Type':'application/json'
            },
            body:JSON.stringify({
                username,
                mail,
                residence,
                password,
                repeat
            })
        }).then(res=>{
            res.json()
        })
    }
}```

Here is the form, i am using the ejs templating engine

```  <!-- FORM STARTS -->
            <div class="login_form" >
                <form class="form" id="sign_up" method="get">
                  <div class="form_input">
                    <label>Name</label>
                    <input type="text"  id="user_name" name="customer_name" required />
                  </div>
  
                  <div class="form_input">
                      <label>Email</label>
                      <input type="text"  id="mail" name="customer_mail" required />
                    </div>
  
                    <div class="form_input">
                      <label>Residence</label>
                      <input type="text"  id="residence" name="customer_residence" required />
                    </div>
                    <div class="form_input">
                      <label>Password</label>
                      <input type="password"  id="password" name="customer_password" required />
                    </div>
                    <div class="form_input">
                      <label>Repeat Password</label>
                      <input type="password" name="repeat_password" id="repeat" required />
                    </div>
                    <div class="login_form-terms">
                        <hr>
                        <input class="login_form-checkbox" type="checkbox">
                        <label for="">I've read and accepted the <span>Terms & Conditions</span> </label>
                        <input type="submit" class="login_form-button"value="Create my account">
                    </div>
                    <div class="login_form-sign-in-option">
                        <p>Already have an account? <a>Sign In</a></p>
                    </div>
                  
                </form>
              </div>
              <!-- FORM ENDS -->
```

Could someone please point out to me what the issue may be ? i have cleard my browser cache, tried using different browsers and the result is still the same.