Estoy configurando un formulario para un sitio web y tratando de configurar un detector de eventos, no estoy seguro de por qué JS no puede leer el elemento form2. He revisado artículos: No se puede leer el elemento del formulario de valor <seleccionado> con JQuery/Javascript
TypeError no capturado: no se puede leer la propiedad 'valor' de nulo
Mi elemento de formulario tiene la identificación correcta pero aún no se puede leer. El código HTML es el siguiente:
<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> El JS es simplemente
document.getElementById('form2').addEventListener('submit', AccountCreation) Soy nuevo en HTML y no estoy seguro si HTML maneja los elementos del formulario de manera diferente, pero no pude encontrar una respuesta definitiva.
Error de consola: TypeError no capturado: no se pueden leer las propiedades de nulo (leyendo 'addEventListener')
¿Quizás olvidó agregar ev.preventDefault() en el controlador de eventos?
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>