Submit Event Listener Does Not Work

When you want to submit a form programmatically the event submit does not get triggered. Here is how you can still trigger the submit event.

I use this when I have another element than a submit button in a form. Let’s say we have this form:

<form>
  <input name="email" type="email" placeholder="Enter your email">
  <img class="submit-image" src="..." alt="Submit">
</form>

I would love to trigger the submit with a click on the image.

This does not work:

const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
  event.preventDefault()
  console.log('We are never getting here unless your click a submit button in the form')
})

const image = document.querySelector('submit-image')
image.addEventListener('click', function() {
  form.submit()
})

But fortunately we can use document.createEvent:

const form = document.querySelector('form')
form.addEventListener('submit', (event) => {
  event.preventDefault()
  console.log('We do get here when both a submit button is clicked and the image')
})

const image = document.querySelector('submit-image')
image.addEventListener('click', function(clickEvent) {
  const domEvent = document.createEvent('Event')
  domEvent.initEvent('submit', false, true)
  clickEvent.target.closest('form').dispatchEvent(domEvent)
})

Happy coding! – Found a mistake or a typo? Please submit a PR to my GitHub-repo.

Get my next post right in your inbox via Blogsend
(I don't get your email address so I can't spam you)

Like this post? Follow @adriaanvrossum on Twitter