What Is the jQuery :submit Selector?

This article provides a concise overview of the jQuery :submit selector, explaining its primary purpose, how it targets form elements, and practical examples of its use in web development. Readers will learn the types of elements this selector matches, the syntax required to implement it, and best practices for optimizing performance when selecting submit elements in forms.

Purpose of the :submit Selector

In jQuery, the :submit selector is used to identify and select all submit buttons within a web page or specific form context. Rather than selecting just a single element type, it matches multiple HTML elements capable of submitting a form.

Specifically, the :submit selector targets:

  • <input type="submit">
  • <input type="image">
  • <button type="submit">
  • <button> elements without an explicit type attribute (as they default to submit behavior in modern browsers)

Basic Syntax

To use the selector across the entire document, apply the standard jQuery syntax:

$(":submit")

To limit the scope and select submit elements within a specific form, pass a container selector context:

$("#myForm :submit")

Common Use Cases

  1. Preventing Duplicate Submissions: Developers frequently use the :submit selector to disable the submit button immediately after a user clicks it, preventing multiple form submissions while a request is processing:
$("form").on("submit", function() {
    $(this).find(":submit").prop("disabled", true);
});
  1. Styling and Dynamic Modification: You can easily alter the appearance or label of all submission triggers in a form:
$("#myForm :submit").val("Processing...").addClass("loading-state");

Performance Considerations

Because :submit is a jQuery-specific extension and not part of the official CSS specification, browsers cannot take advantage of the high-performance native querySelectorAll() method when it is used alone.

For optimal performance in larger or more complex applications, it is recommended to filter using standard CSS selectors or scope the selection using .find():

// Preferred for optimal performance
$("form").find("button[type=submit], input[type=submit]");