CODEWITHSUNDEEP
javascripthtml
Konrad
Konrad

Reputation: 24661

Why doesn't event listener trigger when submit is called?

Seems like calling .submit() on a form ignores added listeners:

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault()
  console.log(Object.fromEntries(new FormData(e.target)))
})

document.querySelector('#no-trigger').addEventListener('click', () => {
  document.querySelector('form').submit()
})
<form>
  <input name="example" id="example">
  <button id="trigger">trigger listener</button>
</form>
<button id="no-trigger">don't trigger listener</button>

I would expect that clicking no-trigger button would also trigger the listener, but it reloads the page instead.

Upvotes: 0

Views: 113

Answers (2)

mplungjan
mplungjan

Reputation: 177975

Here is an implementation of the requestSubmit. I for some reason have to manually add the submit button to the form data

document.querySelector('form').addEventListener('submit', e => {
  e.preventDefault()
  const formData = new FormData(e.target)
  
  for (var x of formData) console.log(x);
  
  // for some reason it does not capture the named button
  formData.append("edit",e.submitter ? e.submitter.value : undefined) // captures the submitter's value if available
  
  console.log(Object.fromEntries(formData))
})

document.getElementById('triggerEdit').addEventListener('click', () => {
  document.querySelector('form').requestSubmit(document.querySelector('[name=edit]'));
})
<form>
  <input name="example" id="example">
  <button id="trigger">trigger listener</button>
  <input type="submit" name="edit" value="trigger listener using this submit button" />
</form>
<hr/>
<button id="triggerEdit">ALSO trigger listener as if the edit button had been clicked</button>

Upvotes: 0

esqew
esqew

Reputation: 44691

This is expected behavior. From MDN:

The event is not sent to the form when calling the form.submit() method directly.

From the spec (emphasis mine):

form.submit()

Submits the form, bypassing interactive constraint validation and without firing a submit event.

Upvotes: 4

Related Questions