Let’s assume the following HTML for a simple contact form:
The wrong way
I sometimes see people attach a click handler to the submit button, like so:
The thing is, this only applies to click events on the button itself. Users should always be able to submit forms by pressing the Enter key while one of the inputs is in focus. This approach won’t work.
The right way
We don’t care if the user clicked the submit button. We actually want to know if they submitted the form. These are two different things.
Instead, you should listen to the submit event on the form itself:
Now the user can submit the form by either clicking the submit button or pressing the Enter key 👍
If you have questions, feedback, or any other suggestions, please do email me. I'd love to hear from you!