Skip to content
Related Articles
Open in App
Not now

Related Articles

jQuery submit() Method

Improve Article
Save Article
  • Last Updated : 02 Nov, 2022
Improve Article
Save Article

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:

 

 


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!