How to Select an Input Button with jQuery

Selecting a form input button with jQuery is a fundamental skill for handling user interactions, validating forms, and modifying UI states dynamically. jQuery offers several flexible methods to target input buttons, including the dedicated :button selector, the standard attribute selector [type="button"], and contextual targeting using forms, IDs, or classes.

1. Using the input[type="button"] Attribute Selector

The most precise and standard way to select an input button is by matching its type attribute. This approach adheres to standard CSS selector syntax and performs efficiently across all modern browsers.

// Selects all input elements with the type "button"
$('input[type="button"]').click(function() {
    alert('Button clicked!');
});

If your form uses submit buttons instead of generic input buttons, replace "button" with "submit":

$('input[type="submit"]');

2. Using jQuery's :button Pseudo-Selector

jQuery includes a proprietary :button pseudo-selector. Note that using $(':button') alone will match both <button> elements and <input type="button"> elements. To limit the selection strictly to <input> tags, prepend the element name:

// Selects only <input> elements of type "button"
$('input:button').css('background-color', '#007bff');

Note: Because :button is a jQuery extension rather than part of the standard CSS specification, queries using it cannot take advantage of the native browser querySelectorAll() optimization. For better performance on large pages, prefer input[type="button"].

3. Selecting Within a Specific Form

To target an input button inside a specific form without affecting buttons elsewhere on the page, prefix the selector with the form's ID or class:

// Targets an input button inside a form with ID "contactForm"
$('#contactForm input[type="button"]').prop('disabled', true);

4. Selecting by ID or Class Name

If the input button has a unique id or a shared class, selecting by these attributes is typically the fastest and cleanest approach:

// Select by ID
$('#submit-btn').hide();

// Select by Class
$('.action-button').addClass('active');