jQuery :submit Selector

What Is :submit?

:submit (since jQuery 1.0) selects elements of type submit — usually <input type="submit"> and <button type="submit">. Official docs: always set a type on <button> so browsers agree on whether it submits.

$(":submit")                         // submit controls
$("input:submit")                    // input submit only
$("form :submit")                    // scoped to a form
$("td :submit")                      // official demo style

// Native / faster (official tip):
$('input[type="submit"], button[type="submit"]')

// Always set type on <button> for consistent matching

How to Use :submit

Scope to a form or cell, count or style matches, and always declare type on buttons.

1. Write $("form :submit") or $("input:submit") instead of a vague bare scan when possible.
2. Give every <button> an explicit type="submit" or type="button".
3. Style, disable, or bind clicks with normal jQuery methods.
4. Prevent accidental navigations in demos with $("form").on("submit", …) and preventDefault().
5. For hot paths, use the official attribute selector list instead of :submit.

Pseudocode

matches = []
for each element in search context:
    if element is a submit control
       (input type=submit, or button that submits):
        matches.add(element)

return matches

// Safer markup:
button elements always have an explicit type

Cheat Sheet

Keep these facts handy while selecting submit controls.

Live Preview

Run different selectors against a small sample form and see how many submit controls match.

$(":submit")
matched: 2

/* input submit + button type=submit */

jQuery Examples

Short, copy-ready snippets. Open DevTools Console with jQuery loaded, or use Try It Yourself for a live editor.

var submitEl = $("form :submit");
$("#result").text("jQuery matched " + submitEl.length + " elements.");
$("form").on("submit", function (e) { e.preventDefault(); });

jQuery matched 2 elements.
(input type=submit + button type=submit)

console.log("input:submit →", $("input:submit").length);
console.log("button[type=submit] →", $("button[type=submit]").length);
console.log(":submit →", $(":submit").length);

input:submit → 1
button[type=submit] → 1
:submit → 2

$(":submit").prop("value", "Send");
$("input:reset").prop("value", "Clear");

console.log("submit:", $(":submit").length);
console.log("reset:", $("input:reset").length);

submit: 1
reset: 1
Labels become Send / Clear

var lines = [
  "typed submit: " + $("button[type=submit]").length,
  "typed button: " + $("button[type=button]").length,
  ":submit total: " + $(":submit").length
];
$("#out").text(lines.join("\\n"));

typed submit: 1
typed button: 1
:submit total: 2  (includes input type=submit too)

var $native = $('input[type="submit"], button[type="submit"]');
$("#out").text(
  "native match: " + $native.length + "\\n" +
  ":submit match: " + $(":submit").length
);

native match: 2
:submit match: 2

Performance Notes

Official docs: because :submit is not CSS, it cannot use the querySelectorAll boost. Prefer the documented attribute selector list when you re-query often.

Key Takeaways