jQuery :submit Selector

Quiz

The :submit selector in jQuery is used to select all <input> elements of type "submit" as well as <button> elements with type "submit".

If we do not provide the "type" to a button element, most browsers will use it as button with type "submit".

Syntax

Following is the syntax of :submit selector in jQuery −

$(":submit")

Parameters

Following is the description of above syntax:

":submit" − This selector will select all submit buttons within the entire document.

Example 1

In the following example, we are using the ":submit" selector to select all the button and input elements with type = "submit" −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(" :submit ").css("background-color", "red")
        });
    </script>
</head>
<body>
    <form>
        <input type="text" name="username" placeholder="Enter username">
        <input type="submit" value="Submit">
    </form>
</body>
</html>

When we execute the above program, the input element with type = "submit" will be highlighted with red background color −

Example 2

Following is another example of :submit selector in jQuery −

<html>
<head>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $(":submit").click(function(){
                alert("Submit button clicked in form!");
            });
        });
    </script>
</head>
<body>
    <form>
        <input type="reset" value="Reset Form 1">
        <input type="submit" value="Submit Form 1">
    </form>

    <form>
        <input type="reset" value="Reset Form 2">
        <input type="submit" value="Submit Form 2">
    </form>
</body>
</html>

Whenever we click on the "type = submit" buttons, an alert will be displayed.

jquery_ref_selectors.htm

Print Page