Form element cannot be read by JS

Question

I am setting up a form for a website and trying to set up an eventlistener, I am unsure as to why the form2 element cannot be read by the JS. I have checked articles: Cannot read value form <selected> element with JQuery/Javascript
Uncaught TypeError: Cannot read property 'value' of null
My form element has the correct id but still can not be read. The HTML code is as follows:

<form onsubmit="AccountCreation(event)" id="form2">     
    <div class="accountcreation">
        <h3>Account Creation</h3>
        <p>To access the site please create an account.</p>
        <hr>
        <div class="form-group">

            <label for="Username"><b>Username</b></label>
            <input type="text" placeholder="Enter Username" name="Username" required>
    
            <label for="psw"><b>Password</b></label>
            <input type="password" placeholder="Enter Password" name="psw" required>
    
            <label for="pswrepeat"><b>Repeat Password</b></label>
            <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
        </div>
        <div class="form-group">
        <label for="Subjects">Choose subjects want to revise, holding control(CMD on mac) to pick multiple</label>
        <select name = "Subjects" id="Subjects" multiple>
            <option value="Maths">Maths</option>
            <option value="Computer_Science">Computer Science</option>
            <option value="Physics">Physics</option>
            <!--Using a select for the form when creating the account allows me to easily add any future subjects once they have been added to the database-->
        </div>
        <input type="submit" value="Sign Up">
    </form>

The JS is simply
document.getElementById('form2').addEventListener('submit', AccountCreation) I am new to HTML and unsure if HTML handles form elements differently but could not find any definitive answer.
Console error: Uncaught TypeError: Cannot read properties of null (reading 'addEventListener')

Without a [mcve] we can't tell for sure, but I have a strong suspicion you are facing the problem linked above. If that's not the issue, then please edit your question and provide a [mcve] and the error/expected behavior/actual behavior. — Ivar, Jan 18 '22 at 20:49

Carsten Massmann · Accepted Answer · 2022-01-18T21:11:22.137

Maybe you forgot to add the ev.preventDefault() in the event handler?

document.getElementById('form2').addEventListener('submit', AccountCreation)

function AccountCreation(ev){
  ev.preventDefault();
  console.log("form submitted.");
}

<form id="form2">     
<div class="accountcreation">
    <h3>Account Creation</h3>
    <p>To access the site please create an account.</p>
    <hr>
    <div class="form-group">

        <label for="Username"><b>Username</b></label>
        <input type="text" placeholder="Enter Username" name="Username" required>

        <label for="psw"><b>Password</b></label>
        <input type="password" placeholder="Enter Password" name="psw" required>

        <label for="pswrepeat"><b>Repeat Password</b></label>
        <input type="password" placeholder="Repeat Password" name="psw-repeat" required>
    </div>
    <div class="form-group">
    <label for="Subjects">Choose subjects want to revise, holding control(CMD on mac) to pick multiple</label>
    <select name = "Subjects" id="Subjects" multiple>
        <option value="Maths">Maths</option>
        <option value="Computer_Science">Computer Science</option>
        <option value="Physics">Physics</option>
        <!--Using a select for the form when creating the account allows me to easily add any future subjects once they have been added to the database-->
    </div>
    <input type="submit" value="Sign Up">
</form>

Form element cannot be read by JS

1 Answers1