Why is this inside the handler undefined and formData is an empty object?

  • 0
    <form id="registrationForm">
        <label for="Name">Name</label>
        <input type="text" id="Name" placeholder="Name" name="name" required>
        <label for="Email">E-mail</label>
        <input type="text" id="Email" placeholder="E-mail" name="email" required>
        <label for="Login">Login</label>
        <input type="text" id="Login" placeholder="Login" name="login" required>
        <label for="Password">Password</label>
        <input type="password" id="Password" placeholder="Password" name="password" required>
        <label for="ConfirmPassword">Confirm Password</label>
        <input type="password" id="ConfirmPassword" placeholder="Confirm Password" name="confirm_password" required>
        <input type="submit" value="Register">

    const form = document.querySelector('form');
    form.addEventListener('submit', function(event) {
        console.log(this) // this - undefined
        let formData = new FormData(form);
        console.log(formData); // formData - пустой {}
    JavaScript Anonymous, Sep 25, 2019

  • 2 Answers
  • 0
    let formData = new FormData ('your_form');

    You need to add the line:

    formData = Object.fromEntries (formData);

  • 0
    Because you haven't added anything to the date forms.

    And about this - who called this handler?)

Your Answer
To place the code, please use CodePen or similar tool. Thanks you!