skip to Main Content

I have an event listener attached to an HTML form element, but the listener is not getting triggered when I click on the button that submits the form or press "enter".

Here is the HTML:

<main class="main">
  <div class="login-form">
    <h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
    <form class="form" id="loginform">
      <div class="form__group">
        <label class="form__label" for="email">Email address</label>
        <input class="form__input" id="email" type="email" placeholder="[email protected]" required="required"/>
      </div>
      <div class="form__group ma-bt-md">
        <label class="form__label" for="password">Password</label>
        <input class="form__input" id="password" type="password" placeholder="••••••••" required="required" minlength="8"/>
      </div>
      <div class="form__group">
        <button class="btn btn--green" type="submit">Login</button>
      </div>
    </form>
  </div>
</main>

Here is the event listener JS code:

const loginForm = document.getElementById('loginform');

if (loginForm) {
  loginForm.addEventListener('submit', (e) => {
    e.preventDefault();
    console.log('Hello from the login event listener');
    const email = document.getElementById('email').value;
    const password = document.getElementById('password').value;
    login(email, password);
  });
}

And here is the JS code for the function login(email, password), which is imported from another file:

export const login = async (email, password) => {
  try {
    const res = await axios({
      method: 'POST',
      url: 'http://127.0.0.1:8000/api/v1/users/login',
      data: {
        email,
        password,
      },
    });

    if (res.data.status === 'success') {
      showAlert('success', 'Logged in successfully!');
      window.setTimeout(() => {
        location.assign('/home');
      }, 1500);
    }
  } catch (err) {
    showAlert('error', err.response.data.message);
  }
};

Troubleshooting steps I’ve taken:

  1. I verified that the ‘submit’ event listener is actually attached to the form element — I can see it in the "event listeners" tab of the Chrome dev tools
  2. I verified that the browser is registering clicks to the submit button. I did this by adding an event listener to the body element and sending event.target to the console log. When I click on the submit button, the browser registers that the submit button is being clicked, but the ‘submit’ event listener attached to the form is not triggered.
  3. I tested another event listener on the page and it still worked. Though, oddly, none of my anchor elements are redirecting to the href when clicked anymore — I don’t know whether this is related in any way to my form not submitting.

2

Answers


  1. Chosen as BEST ANSWER

    I figured out the problem. It was a dumb mistake on my part. In working to diagnose another problem, I'd added an event listener to the body element so that I could verify that click events were being generated (and see where they were being generated) when various DOM elements were clicked. BUT... I included an event.preventDefault() statement in that event listener, which shut down the default behavior on whatever was being clicked -- including the form element. Once I removed the event listener the form worked properly.

    Thanks for your help everyone!


  2. Your code seems to work fine. I get a console statement when I submit the form.

    Keep in mind that the submit event is not triggered until the form is valid though! Since you put a required attribute on both text fields, then the email must not be blank and must be a valid email since you specified type="email", and the password must not be blank and must be at least 8 characters long since you specified minlength="8"

    const loginForm = document.getElementById('loginform');
    
    if (loginForm) {
      loginForm.addEventListener('submit', (e) => {
        e.preventDefault();
        console.log('Hello from the login event listener');
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;
        //login(email, password);
      });
    }
    <main class="main">
      <div class="login-form">
        <h2 class="heading-secondary ma-bt-lg">Log into your account</h2>
        <form class="form" id="loginform">
          <div class="form__group">
            <label class="form__label" for="email">Email address</label>
            <input class="form__input" id="email" type="email" placeholder="[email protected]" required="required"/>
          </div>
          <div class="form__group ma-bt-md">
            <label class="form__label" for="password">Password</label>
            <input class="form__input" id="password" type="password" placeholder="••••••••" required="required" minlength="8"/>
          </div>
          <div class="form__group">
            <button class="btn btn--green" type="submit">Login</button>
          </div>
        </form>
      </div>
    </main>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search