Issue
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.
Solution
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.
Answered By - esqew
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.