jQuery :submit Selector

What You’ll Learn

The :submit selector matches every submit-type form control — input[type=submit] and button[type=submit]. Available since jQuery 1.0; always specify type on buttons for cross-browser consistency.

Introduction

Every HTML form needs a way to send data — submit buttons trigger the browser’s form submission. jQuery’s :submit pseudo-class selects every control whose type is submit, whether rendered as an <input> or a <button>.

Official jQuery documentation notes that some browsers treat <button> as submit implicitly while others do not — always write an explicit type attribute. The official demo finds td :submit descendants, styles their parent cells, and reports the match count.

Understanding the :submit Selector

Think of :submit as “which controls will post this form?”:

• input[type=submit] → classic submit input.
• button[type=submit] → submit styled as a button tag.
• input[type=button] → no match — use :button.
• input[type=reset] → no match — use :reset.

📝 Syntax

Official jQuery API form (since 1.0):

jQuery( ":submit" )

// scoped queries:
$( "form :submit" )
$( "td :submit" )

// native CSS (official docs recommendation):
$( 'input[type="submit"], button[type="submit"], button:not([type])' )

// avoid bare universal scan on huge pages:
$( ":submit" )   // implies *:submit

// not for plain buttons:
$( "input:button" )

Parameters

• No arguments — keeps elements whose submit behavior applies.

Return value

• A jQuery object containing every matching submit control (zero or more).

Official jQuery API example

var submitEl = $( "td :submit" )
  .parent( "td" )
  .css({
    background: "yellow",
    border: "3px red solid"
  })
  .end();

$( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );

Examples Gallery

Example 1 follows the official jQuery td :submit demo. Examples 2–5 cover contrast with :button, native attribute selectors, scoped form queries, and preventing double submission.

var submitEl = $( "td :submit" )
  .parent( "td" )
  .css({
    background: "yellow",
    border: "3px red solid"
  })
  .end();

$( "#result" ).text( "jQuery matched " + submitEl.length + " elements." );

$( "form" ).on( "submit", function( event ) {
  event.preventDefault();
} );

jQuery matched 2 elements.
Parent td cells styled yellow/red
Plain button and text inputs → unchanged

$( ":button" ).prop( "disabled", true );
$( ":submit" ).prop( "disabled", false );

// input[type=button] → :button only
// input[type=submit] → :submit only

Plain :button controls → disabled
:submit controls → still enabled for form post

$( 'input[type="submit"], button[type="submit"], button:not([type])' )
  .addClass( "submit-btn" );

// Pure DOM equivalent:
document.querySelectorAll(
  'input[type="submit"], button[type="submit"], button:not([type])'
);

All submit controls → .submit-btn class
Includes button:not([type]) per official jQuery note

$( "#signupForm :submit" ).addClass( "primary-submit" );

// loginForm submit buttons are not affected

#signupForm submit → .primary-submit class
#loginForm submit → unchanged

$( "#checkoutForm" ).on( "submit", function() {
  $( this ).find( ":submit" ).prop( "disabled", true );
  $( "#status" ).text( "Processing…" );
} );

First submit → buttons disabled, status shows "Processing…"
Prevents accidental double order placement

🚀 Common Use Cases

• Checkout flows — disable :submit after first post.
• Multi-step wizards — style the active step’s submit button.
• AJAX forms — lock :button but keep :submit enabled.
• Validation — enable submit only when required fields pass checks.
• Admin tables — highlight rows with submit controls (official demo pattern).
• Performance — prefer attribute selectors over bare :submit.

📝 Notes

• Available since jQuery 1.0 — for submit-type inputs and buttons.
• jQuery extension — not valid in native querySelectorAll(":submit").
• Always specify type on <button> elements (official docs).
• input[type=submit] matches :submit, not :button.
• button[type=submit] matches both :submit and :button.
• Official native alternative — input[type="submit"], button[type="submit"], button:not([type]).

💡 Best Practices