jQuery Submit Event

What You’ll Learn

The submit event fires when the user attempts to send a <form> — click a submit button, press Enter, or call .trigger("submit"). This tutorial covers .on("submit"), eventData, event.preventDefault(), validation before send, AJAX patterns, and the official jQuery API demos.

Introduction

Login forms, contact forms, and checkout pages all need one critical hook: code that runs right before the browser sends data to the server. The submit event is that hook — it fires when the user tries to submit the form, giving you a chance to validate, show errors, or send data with AJAX instead of a full page reload.

The official jQuery API distinguishes the submit event (bound with .on("submit") since 1.7) from the deprecated .submit() method in older code. To programmatically run submit handlers, use .trigger("submit") since jQuery 1.0.

Understanding the submit Event

The submit event is sent to a <form> element when the user is attempting to submit it. It can only be attached to forms — not individual inputs, buttons, or divs.

Forms submit when the user clicks an explicit <button type="submit">, <input type="submit">, or <input type="image">, or when Enter is pressed under certain browser conditions. Your handler runs before the actual submission — so you can cancel it with event.preventDefault() or return false.

📝 Syntax

The modern jQuery API for the submit event has two main forms — binding a handler and triggering the event:

1. Bind a handler — .on("submit" [, eventData ], handler) (since 1.7)

.on( "submit" [, eventData ], handler )

• eventData — optional object passed to the handler as event.data.
• handler — function called each time submit fires: function( event ) { ... }.

2. Event delegation — .on("submit", selector, handler)

$( "#app" ).on( "submit", "form", function( event ) {
  // runs when any form inside #app is submitted — including future ones
} );

jQuery normalized submit delegation across browsers since 1.4 (native submit did not bubble in IE). You can bind on a parent container for multiple forms, though binding directly on the <form> is most common.

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

.trigger( "submit" )

• Runs bound submit handlers on the matched element(s).
• Also fires the browser default submit action unless you call preventDefault() or return false.

4. Unbind — .off("submit" [, selector] [, handler])

$( "#target" ).off( "submit" );              // remove all submit handlers
$( "#app" ).off( "submit", "form", fn );  // remove delegated handler

Official jQuery API examples

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

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

Return value

• .on() and .trigger() return the original jQuery object for chaining.
• Returning false from the handler cancels submission — same as preventDefault() + stopPropagation().

Examples Gallery

Examples 1–2 follow the official jQuery API documentation. Examples 3–5 extend the official validation demo, flag-variable pattern, and AJAX submit. Use the Try-it links to run each snippet in the browser.

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

Click Submit button → alert runs

Page does NOT navigate away (preventDefault)

Press Enter in single text field may also trigger submit

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

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

Click #other → trigger("submit") → alert runs

Same handler as clicking the form Submit button

Without preventDefault, form would also post to action URL

$( "form" ).on( "submit", function( event ) {
  if ( $( "input" ).first().val() === "correct" ) {
    $( "span" ).text( "Validated..." ).show();
    return;
  }
  $( "span" ).text( "Not valid!" ).show().fadeOut( 1000 );
  event.preventDefault();
} );

Type "wrong" + Submit → "Not valid!" fades out, form blocked

Type "correct" + Submit → "Validated..." shown, form submits

Official jQuery API validation pattern

var allowSubmit = false;

$( "#gate" ).on( "submit", function() {
  return allowSubmit;
} );

$( "#enable" ).on( "click", function() {
  allowSubmit = true;
  $( "#status" ).text( "Submit enabled — try the form again." );
} );

Submit while allowSubmit is false → form blocked (return false)

Click Enable → allowSubmit = true

Submit again → form proceeds (handler returns true)

$( "#contact" ).on( "submit", function( event ) {
  event.preventDefault();
  var $form = $( this );
  $.ajax( {
    url: $form.attr( "action" ),
    method: $form.attr( "method" ) || "POST",
    data: $form.serialize(),
    success: function( response ) {
      $( "#result" ).text( "Sent! Server replied: " + response );
    }
  } );
} );

User clicks Send → preventDefault stops page reload

$.ajax posts serialized field values

#result updates with server response (demo uses mock endpoint)

🚀 Common Use Cases

• Client-side validation — block invalid forms with event.preventDefault() before data reaches the server.
• AJAX login and contact forms — preventDefault + $.ajax + .serialize() for no-reload submits.
• Multi-step wizards — intercept submit on intermediate steps, validate, then advance without posting.
• Confirm dialogs — if (!confirm("Send?")) event.preventDefault() before destructive actions.
• Analytics tracking — log form submission attempts in the handler before allowing default submit.
• Custom submit buttons — $("#myForm").trigger("submit") from a styled div outside the form.

📝 Notes

• Bind with .on("submit", handler) since jQuery 1.7 — not the deprecated .submit(handler) method.
• Trigger with .trigger("submit") since jQuery 1.0.
• Limited to <form> elements — not individual inputs or buttons.
• Handler runs before navigation — use event.preventDefault() to cancel.
• return false from handler = preventDefault() + stopPropagation().
• Avoid naming inputs submit, length, or method — conflicts with form properties (DOMLint).
• jQuery normalized submit delegation since 1.4 for cross-browser consistency.
• Use .off("submit") to remove handlers — avoid deprecated .unbind("submit").

💡 Best Practices