jQuery .submit() Method

What You’ll Learn

The .submit() method is jQuery’s legacy shorthand for binding and triggering the submit event on forms. This tutorial covers .submit(handler) since 1.0, .submit(eventData, handler) since 1.4.3, no-argument .submit() as a trigger, migration to .on("submit") and .trigger("submit"), and why the binding form is deprecated since jQuery 3.3. See the jQuery submit event tutorial for the modern API.

Introduction

Before jQuery 1.7 unified events with .on() and .off(), every common event had a matching shorthand — .submit(), .change(), .blur(), and more. The .submit() method let you validate or intercept form sends in one short call: $("#login").submit(function(e){ e.preventDefault(); ... }). It remains in jQuery 3.x for backward compatibility but is marked deprecated.

Understanding .submit() matters when reading older login-form, contact-form, and admin-panel tutorials in legacy codebases. The method does two distinct jobs: with a function argument it binds; with no arguments it triggers. Modern jQuery splits those roles explicitly — .on("submit", handler) for binding and .trigger("submit") for firing.

Understanding the .submit() Method

The official jQuery API describes .submit() as a way to bind an event handler to the submit event, or trigger that event on an element. When you pass a handler, jQuery registers it on each matched <form> and calls it when the user attempts to submit — the same submit event that .on("submit") handles today.

When you call .submit() with no arguments, jQuery synthetically fires the submit event on each matched form. Bound handlers run and the browser performs the default submit action — navigating to action or posting data — unless a handler calls preventDefault(). This trigger behavior is equivalent to .trigger("submit").

📝 Syntax

The .submit() method has three signatures from the official jQuery API. The binding forms are deprecated; the trigger form remains valid but .trigger("submit") is preferred:

1. Bind a handler — .submit( handler ) (since 1.0, deprecated 3.3)

.submit( handler )

• handler — function executed each time submit fires: function( event ) { ... }.
• Returns the jQuery object for chaining.
• Modern replacement: .on( "submit", handler ).

2. Bind with eventData — .submit( [eventData], handler ) (since 1.4.3, deprecated 3.3)

.submit( [eventData], handler )

• eventData — optional object available in the handler as event.data.
• Modern replacement: .on( "submit", eventData, handler ).

3. Trigger the event — .submit() (since 1.0)

.submit()

• No arguments — triggers submit on every matched element.
• Runs bound submit handlers.
• Preferred replacement: .trigger( "submit" ).

Official jQuery API migration note

// Deprecated binding
$( "#target" ).submit( function( event ) {
  alert( "Handler for `submit` called." );
  event.preventDefault();
} );

// Modern binding
$( "#target" ).on( "submit", function() {
  alert( "Handler for `submit` called." );
} );

// Deprecated trigger
$( "#target" ).submit();

// Modern trigger
$( "#target" ).trigger( "submit" );

Return value

• All .submit() signatures return the original jQuery object for chaining.
• Handler return values are ignored unless you use return false (equivalent to preventDefault() + stopPropagation()).

Examples Gallery

Five examples cover binding, eventData, triggering, migration from .submit() to .on("submit"), and method chaining. Use the Try-it links to run each snippet in the browser. Remember: binding with .submit(handler) is deprecated — these demos show legacy syntax you will encounter in older code.

$( "#target" ).submit( function( event ) {
  alert( "Handler for \`submit\` called." );
  event.preventDefault();
} );

User clicks Submit on #target form
→ alert runs, page stays (preventDefault)

Deprecated — prefer .on("submit", fn) for new code

$( "#login" ).submit( { formId: "login" }, function( event ) {
  event.preventDefault();
  $( "#out" ).text(
    "Form: " + event.data.formId + " | user: " + $( "#user" ).val()
  );
} );

Submit #login form → "Form: login | user: jane"

Same handler, shared eventData on every submit

eventData.formId passed without a closure

var count = 0;

$( "#target" ).submit( function( event ) {
  count++;
  $( "#out" ).text( "Target submit handler fired (count: " + count + ")" );
  event.preventDefault();
} );

$( "#fire" ).click( function() {
  $( "#target" ).submit();
} );

Click Submit on #target → count increments

Click #fire → $("#target").submit() → same handler runs

No-arg .submit() is trigger shorthand — selects all text; prefer .trigger("submit")

$( "#legacy" ).submit( function() {
  $( "#out" ).text( "Legacy: .submit(function(){ ... }) — deprecated since jQuery 3.3." );
} );

$( "#modern" ).on( "submit", function() {
  $( "#out" ).text( "Modern: .on('submit', function(){ ... }) — use this for new code." );
} );

Submit #legacy form → legacy deprecation message

Submit #modern form → modern .on("submit") message

Behavior is identical — only the API name differs

$( "#contact" )
  .submit( function( event ) {
    event.preventDefault();
    $( "#notice" ).text( "First handler: blocked default submit." ).show();
  } )
  .submit( function( event ) {
    $( "#result" ).text( "Second handler: would AJAX serialize here." );
  } );

User submits #contact form

First handler preventDefault + shows #notice

Second handler updates #result

Both handlers run in bind order on each submit

🚀 Common Use Cases

• Reading legacy code — recognize $("#login").submit(fn) as equivalent to .on("submit", fn) in older form scripts.
• Form validation — legacy tutorials bind .submit() to validate before the browser sends data.
• Programmatic submit — $("#myForm").submit() from a custom button — replace with .trigger("submit").
• Shared eventData — $("#login").submit({ formId: "login" }, fn) passes form metadata without closures.
• AJAX contact forms — chained .submit(fn) calls preventDefault then serialize and post.
• Maintaining WordPress themes — many admin and front-end scripts still use .submit() — know how to migrate safely.

📝 Notes

• Deprecated since jQuery 3.3 — do not use .submit(handler) or .submit(eventData, handler) in new code. Use .on("submit") instead.
• Bind with .submit(handler) since jQuery 1.0; eventData form since 1.4.3.
• No-argument .submit() triggers the event since jQuery 1.0 — prefer .trigger("submit").
• .submit() does not support event delegation — use .on("submit", "form", fn) for dynamic multi-form pages.
• Applies to <form> elements only — not individual inputs or buttons.
• Remove handlers with .off("submit") — not by calling .submit(undefined).
• For the full modern submit event guide — preventDefault, AJAX, and delegation — see the jQuery submit event tutorial.

💡 Best Practices