onClick vs onSubmit: Which Fires First in JavaScript Forms?

Short answer: If someone clicks a submit button inside a form, the button's click event fires first. After that, assuming nothing cancels the click, the browser submits the form and fires the form's submit event.

That detail matters when a form starts acting weird. Validation might run twice. The submit handler might never run. Pressing Enter might skip the code attached to the button. Most of those bugs come from treating click and submit like the same event. They are related, but they are not interchangeable.

What happens First event Next event Why it matters User clicks <button type="submit"> click submit This is the normal button-submit path. User presses Enter in a form field submit No guaranteed button click Button-only logic can get skipped. A click handler calls event.preventDefault() click submit may not happen The click can cancel the form's default submit action. Button uses type="button" click No submit A plain button does not submit the form by itself. JavaScript calls form.requestSubmit() Programmatic submit path submit This uses the browser's normal submit flow.

Quick example: click runs before submit

This example logs button click first and form submit second when the submit button is clicked:

<form id="demo-form">
  <input name="email" type="email" required>
  <button id="submit-button" type="submit">Submit</button>
</form>

<script>
  const form = document.querySelector('#demo-form');
  const button = document.querySelector('#submit-button');

  button.addEventListener('click', function () {
    console.log('button click');
  });

  form.addEventListener('submit', function (event) {
    event.preventDefault();
    console.log('form submit');
  });
</script>

The button receives the click first because that is the element the user activated. Then the browser follows the button's default behavior and submits the form. Right before the browser sends the form, the form's submit event fires.

What the click event is for

The click event belongs to the element the user activates. In a form, that is often a button, but it could also be a link, checkbox, radio button, or custom control.

Use a click handler when the behavior is tied to that specific button. Good examples include opening a confirmation message, changing button text, tracking a button interaction, or toggling a piece of UI.

Do not make the click handler the only place where form submission is handled. A form can be submitted without a mouse click, and that is where people get burned.

What the submit event is for

The submit event belongs to the form. It fires when the browser is about to submit that form, whether the user clicked a submit button, pressed Enter, or triggered submission through JavaScript.

That makes submit the safer place for form logic, including validation, duplicate-submit prevention, API calls, and any code that should run every time the form is submitted.

onClick vs onSubmit order of execution

For the common case, the order is:

1. The user clicks a submit button.
2. The button's click event fires.
3. If the click is not cancelled, the browser runs the button's default action.
4. That default action submits the form.
5. The form's submit event fires.
6. If the submit is not cancelled, the browser finishes the submission.

The practical rule: click first, submit second when the user clicks a submit button.

Why Enter key submission can surprise you

Pressing Enter inside a form field can submit the form without running the button-specific click code you expected. The exact behavior depends on the browser, focused field, and form structure, but the safe assumption is simple: if the logic must run on every submission, put it on the form.

This is the strongest reason to avoid putting validation only in onclick. Keyboard users, screen reader users, and fast desktop users often submit forms without touching the button directly.

How preventDefault changes the order

event.preventDefault() cancels the default action for the event it runs on. With a submit button, the click's default action is to submit the form.

button.addEventListener('click', function (event) {
  event.preventDefault();
  console.log('click ran, but the form will not submit');
});

form.addEventListener('submit', function () {
  console.log('this may never run');
});

If the click handler cancels the click, the form may never reach its submit event. If the submit handler calls preventDefault(), the submit event still runs, but the browser does not send the form afterward.

That distinction matters. A click handler can stop the form before the submit handler sees it. A submit handler can stop the final submission while still giving you one reliable place to run form code.

Where form validation should go

Most form validation belongs in the submit handler. That way it runs whether the user clicks the button, presses Enter, or submits the form another way.

Code you are writing Best place Reason Required field checks submit handler It catches the common submit paths. Duplicate-submit prevention submit handler, with button state if needed The form submission is the action you are guarding. Button text, spinner, or local UI change click handler That behavior belongs to the button. Sending form data to an API submit handler The API call should happen when the form submits, instead of depending on one button click. Button interaction analytics click handler You are tracking the user's button action.

Common mistakes with click and submit events

• Putting all validation in onclick. This misses some keyboard and script-driven submissions.
• Forgetting button types. A button inside a form can submit the form unless you set type="button".
• Calling preventDefault() too early. Cancelling the click can keep the submit handler from running.
• Mixing inline handlers with addEventListener. Inline onclick and onsubmit attributes make event flow harder to follow as the form grows.
• Assuming every submit starts with a click. Forms can be submitted by keyboard and by JavaScript.

Official references

For the browser details, MDN has good references for the click event, the submit event, and event.preventDefault(). The underlying browser behavior comes from the HTML form submission algorithm.