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