jQuery Submit Event

What Is the submit Event?

The submit event fires when the user attempts to submit a form — click a submit button, press Enter in certain fields, or call .trigger("submit"). Bind with .on("submit", handler) (jQuery 1.7+). The handler runs before the browser navigates or posts.

$("#target").on("submit", function (event) {
  // runs before the form posts / navigates
  event.preventDefault(); // stop the default submit
});

$("#other").on("click", function () {
  $("#target").trigger("submit"); // run handlers (+ default unless prevented)
});

// Prefer this over deprecated .submit(handler)

How to Use submit

Bind on the form, validate or prepare data, then allow or cancel the default submit.

1. Bind with .on("submit", handler) on a <form>.
2. Optionally pass eventData: .on("submit", data, handler).
3. Call event.preventDefault() to stop the browser from posting/navigating.
4. Trigger with .trigger("submit") from a custom button if needed.
5. For AJAX, preventDefault, then .serialize() and send with $.post() / $.ajax().

Pseudocode

call form.on("submit", handler)
    → store handler on the form

when user clicks submit / Enter causes submit / .trigger("submit"):
    fire "submit" on form
    call handler(event)
    if handler called preventDefault (or returned false):
        stop browser post / navigation
    else:
        browser submits the form (navigate or POST)

to migrate shorthand:
    .submit(fn) → .on("submit", fn)
    .submit()   → .trigger("submit")

Cheat Sheet

Keep these facts handy while wiring form submit UX.

Live Preview

Submit the demo form (always prevented here so the page stays), or run an action to .trigger("submit").

Ready — submit the form or pick an action.

jQuery Examples

Short, copy-ready snippets based on the official jQuery API demos. Open Try It Yourself for a live editor.

$("#target").on("submit", function (event) {
  $("#out").text("Handler for submit called.");
  event.preventDefault();
});

Submit the form
#out shows "Handler for submit called."
Page does not navigate

$("#target").on("submit", function (event) {
  $("#out").text("Submit handler ran (user or trigger).");
  event.preventDefault();
});

$("#other").on("click", function () {
  $("#target").trigger("submit");
});

Click #other → submit handlers run
preventDefault keeps the page here

$("#demo").on("submit", function (event) {
  if ($("#code").val() === "correct") {
    $("#out").text("Validated...");
  } else {
    $("#out").text("Not valid!");
  }
  event.preventDefault(); // demo stays on page; omit to allow a real post
});

Type "correct" → Validated...
Anything else → Not valid! (blocked)

$("#signup").on("submit", { form: "signup" }, function (event) {
  $("#out").text("Submitting " + event.data.form);
  event.preventDefault();
});

Submit → "Submitting signup"

$("#contact").on("submit", function (event) {
  event.preventDefault();
  var data = $(this).serialize();
  $("#out").text("Would send: " + data);
  // $.post("/api/contact", data);
});

Submit → "Would send: name=Ada&email=ada%40example.com"

Performance Notes

Submit handlers run once per attempt. Keep validation light so the UI feels instant; do heavy work after you decide to send.

Key Takeaways