jQuery .submit() Method

What Is .submit()?

.submit() is jQuery’s legacy shorthand for binding or triggering the submit event on a <form> — when the user attempts to send the form. Binding is deprecated since 3.3; modern code uses .on("submit") / .trigger("submit").

// Legacy (still works; bind form deprecated since 3.3)
$("#target").submit(function (event) {
  event.preventDefault(); // stop navigation
});

// Modern replacements
$("#target").on("submit", handler);     // bind
$("#target").trigger("submit");         // fire handlers (+ default unless prevented)

// Bind on the <form>, not the button

How to Use .submit()

Recognize the legacy API in old code, then migrate to .on() / .trigger().

1. Bind with .submit(handler) (legacy) or .on("submit", handler) (preferred) on a form.
2. Optionally pass eventData: .submit(data, handler) → .on("submit", data, handler).
3. Trigger with no-arg .submit() (legacy) or .trigger("submit") (preferred).
4. Call event.preventDefault() inside the handler to stop a full page post.
5. For dynamic forms, use delegated .on("submit", "form", fn) — not .submit().

Pseudocode

// Legacy
call form.submit(handler)
    → bind "submit" on form

when user submits / .submit() with no args:
    fire "submit" on form
    call handler(event)
    if not prevented → browser posts / navigates

// Modern
call form.on("submit", handler)
call form.trigger("submit")

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

Cheat Sheet

Quick map from the shorthand to modern APIs.

Live Preview

Submit the demo form (always prevented here), or run an action with legacy .submit() (still available in jQuery 3.x).

Ready — submit the form or pick an action.

jQuery Examples

Short, copy-ready snippets. Prefer .on("submit") for new projects; these demos show the legacy API you will still meet in older code.

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

Submit the form
#out shows the handler message
Page does not navigate

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

Submit → "Submitting signup"

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

$("#other").on("click", function () {
  $("#target").submit(); // no-arg → trigger
});

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

// Before (deprecated bind)
$("#target").submit(function (event) {
  $("#out").text("legacy .submit(fn)");
  event.preventDefault();
});

// After (preferred)
$("#target").on("submit", function (event) {
  $("#out").text("modern .on(\"submit\", fn)");
  event.preventDefault();
});

// Trigger: .submit() → .trigger("submit")

Submit → modern handler message
(legacy bind removed after migration)

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

Type "correct" → Validated...
Anything else → Not valid!

Performance Notes

Migration from .submit() to .on("submit") does not change performance — it is a clearer, supported API.

Key Takeaways