Open In App
Related Articles

How to reset a form using jQuery with .reset() method?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Report issue
Report

In this article, we will implement the reset functionality with the reset() method in jQuery and reset all the input fields of a form. Resetting anything will set everything back to its original state. JQuery doesn’t have a reset() method, but native JavaScript does. So, we convert the jQuery element to a JavaScript object.

Syntax:

$('element_selector')[0].reset();
OR
$('element_selector').get(0).reset();

Example 1: The below example implements the reset functionality using the reset() method and $(‘element_selector’)[0].reset(); syntax:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Try jQuery Online</title>
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("#resetBtn").click(function(e) {
                //$("#d").trigger("reset");
                //$("#d").get(0).reset();
                e.preventDefault();
                $("#d")[0].reset()
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h4>
        Click on "Submit" to submit and
        remaining resets to get form to original state.
        </h4>
        <form id="d" name="geek">
            <table cellspacing="0" cellpadding="3" border="1">
                <tr>
                    <td align="center">Username</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Email</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Password</td>
                    <td>
                        <input type="password" />
                    </td>
                </tr>
            </table>
            <input type="submit" value="Submit" />
        </form>
        <button id="resetBtn">Reset Form</button>
    </center>
</body>
 
</html>

                    

Output:

formResetter

Example 2: This example implements the reset functionality using the reset() method and $(‘element_selector’)[0].reset(); syntax:

HTML

<!DOCTYPE html>
<html>
 
<head>
    <title>Try jQuery Online</title>
    <script src=
    </script>
    <script>
        $(document).ready(function() {
            $("#resetBtn").click(function(e) {
                //$("#d").trigger("reset");
                //$("#d").get(0).reset();
                e.preventDefault();
                $("#d").get(0).reset()
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1 style="color:green">GeeksforGeeks</h1>
        <h4>
        Click on "Submit" to submit and
        remaining resets to get form to original state.
        </h4>
        <form id="d" name="geek">
            <table cellspacing="0" cellpadding="3" border="1">
                <tr>
                    <td align="center">Username</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Email</td>
                    <td>
                        <input type="text" name="name" />
                    </td>
                </tr>
                <tr>
                    <td align="center">Password</td>
                    <td>
                        <input type="password" />
                    </td>
                </tr>
            </table>
            <input type="submit" value="Submit" />
        </form>
        <button id="resetBtn">Reset Form</button>
    </center>
</body>
 
</html>

                    

Output:

formResetter

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



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