Open In App

jQuery submit() Method

Improve
Improve
Like Article
Like
Save
Share
Report

The jQuery submit() method is used to submit events or attaches a function to run when a submit event occurs. This method can only apply to the form elements. 

Syntax:

$(selector).submit(parameters);

Parameter: The method is an optional parameter.

Return Value: This method returns the selected element along with the attached event. 

Example 1: In this example, we will show the working of the submit() method 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
 
        // jQuery code to show the working of this method
        $(document).ready(function () {
            $("form").submit(function () {
                alert("Form submitted Successfully");
            });
        });
    </script>
 
    <style>
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
            text-align: center;
        }
 
        .geeks {
            font-size: 17px;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
    <form action="">
        <table border=1 align="center">
            <tr>
                <!-- Enter Username -->
                <td>Username:</td>
                <td>
                    <input type=text
                           name=name
                           size=25>
                </td>
            </tr>
            <tr>
                <!-- Enter Password. -->
                <td>Password:</td>
                <td>
                    <input type=password
                           name=password1
                           size=25>
                </td>
            </tr>
            <tr>
                <!-- To Confirm Password. -->
                <td>Confirm Password:</td>
                <td><input type=password
                           name=password2
                           size=25></td>
            </tr>
            <tr>
                <td colspan=2 align=right>
                    <input type=submit
                           value="Submit">
                </td>
            </tr>
        </table>
    </form>
</body>
 
</html>


Output:

  

Example 2: In this example, we will submit the form with the help of click function.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
 
        // jQuery code to show the working of this method
        $(document).ready(function () {
            $("form").submit(function () {
                alert("Form submitted Successfully");
            });
            $("button").click(function () {
                $("form").submit();
            });
        });
    </script>
    <style>
        .gfg {
            font-size: 40px;
            color: green;
            font-weight: bold;
            text-align: center;
        }
 
        .geeks {
            font-size: 17px;
            text-align: center;
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
    <div class="gfg">GeeksforGeeks</div>
    <div class="geeks">
        A computer science portal for geeks
    </div>
    <form action="">
        <table border=1 align="center">
            <tr>
                <!-- Enter Username -->
                <td>Username:</td>
                <td>
                    <input type=text
                        name=name size=25>
                </td>
            </tr>
            <tr>
                <!-- Enter Password. -->
                <td>Password:</td>
                <td>
                    <input type=password
                        name=password1 size=25>
                </td>
            </tr>
            <tr>
                <!-- To Confirm Password. -->
                <td>Confirm Password:</td>
                <td>
                    <input type=password
                        name=password2 size=25>
                </td>
            </tr>
            <tr>
                <td colspan=2 align=right>
                    <button>Click me !</button>
            </tr>
        </table>
    </form>
</body>
 
</html>


Output:

 



Last Updated : 07 Jul, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads