Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Form is returning null without any reason

thanks to give me your time.

I actually coding a login page but i can’t write form.addEventListener()
When i console.log(form) it return null and i don’t know why
For the js side :

const form = document.getElementById("form");
console.log(form)

form.addEventListener('submit', (event) => {
    event.preventDefault
    console.log(event)
    console.log(form)
})

For the html side :

[...]
        <form id="form">
            <label for="email"> Entrez votre Email : </label>
            <input id="email" type="email" name="email" placeholder="Email ..." required>
            <label for="mdp"> Entrez votre Mot de Passe : </label>
            <input type="password" name="password" id="mdp" placeholder="Mot De Passe ..." required>
            <input type="submit" name="envoyer" id="send" value="Se connecter">
        </form>
[...]

thanks you if you read that !

I tried to change form, re try in another folder but nothing change

Tags:

3

Answers


  1. 0

    enter image description here

    preventDefault is a method of the Event object, and you need parentheses on the call to it.

    —> event.preventDefault();

    Login or Signup to reply.
  2. 0

    It looks like you’re encountering an issue where the form element is returning null in your JavaScript code. This typically happens when the script runs before the HTML document is fully loaded.

    To ensure that your script runs after the HTML document has loaded, you can wrap your JavaScript code in an event listener for the ‘DOMContentLoaded’ event. This event ensures that your script executes only after the HTML document has been fully parsed, and the form element is available for manipulation.

    Here’s an example:

    javascript

      document.addEventListener('DOMContentLoaded', function () {
    const form = document.getElementById("form");
    console.log(form);

    form.addEventListener('submit', (event) => {
        event.preventDefault();
        console.log(event);
        console.log(form);
        // Add your form submission logic here
    });
  });

    This should help resolve the issue of the form element returning null. Additionally, ensure that there are no typos in the id attribute of the form and that there’s no other script interfering with the DOM before your script runs.

    Login or Signup to reply.
  3. 0

    Missing the parentheses after preventDefault function, you need to correct it like this event.preventDefault()

    check the next snippet

    const form = document.getElementById("form");

form.addEventListener('submit', (event) => {
  event.preventDefault()
  let data = new FormData(form)
  data.forEach((a) => { console.log(a) } )
})
    <form id="form">
  <label for="email"> Entrez votre Email : </label>
  <input id="email" type="email" name="email" placeholder="Email ..." required>
  <label for="mdp"> Entrez votre Mot de Passe : </label>
  <input type="password" name="password" id="mdp" placeholder="Mot De Passe ..." required>
  <input type="submit" name="envoyer" id="send" value="Se connecter">
</form>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search