onsubmit method vs submit event listener

Question

I have been doing a mail program for a course, and I am encountering behaviour I do not understand related to preventing form submission via return false:

Case 1: Form submission is not properly prevented and DOM is reloaded giving a 200 error

document.querySelector('#compose-form').addEventListener('submit', () => {

send_email();

load_mailbox('inbox');

return false;

})

Case 2: Form submission is properly prevented and DOM is not reloaded returning an expected 201 code

document.querySelector('#compose-form').onsubmit = () => {

send_email();

load_mailbox('inbox');

return false;

}

Answer 1

The difference is that onsubmit replaces the current (already assigned) function. addEventListener on the other hand adds an additional command to the already existent property.

So in your case when using addEventListener you need to prevent the default behavior with a preventDefault function.

Try this:

// add event as an argument
document.querySelector('#compose-form').addEventListener('submit', (event) => {
  event.preventDefault(); // add this line

  // and then do your stuff
  send_email();
  load_mailbox('inbox');
  return false;

})