How to Reset Form using jQuery with reset() Method?

Last Updated : 08 Oct, 2024

Reset a form means clear all input fields data and returns to their initial default values. It can be useful where a user wants to clear all entered data or you want to reset the form after a successful submission. The reset() method can easily reset the form data after clicking the reset button or successful form submission.

Resetting a Form using JavaScript reset() Method

The reset() method is a built-in JavaScript method that can be used to reset a form. When invoked, this method restores the form's fields to their default values. The reset() method is used with jQuery to reset the form fields.

Syntax

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

Example 1: In this example, we use reset() method to reset the form data. The form will be reset when user click on "Reset Form" button.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Reset a form using jQuery
        with reset() method
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body>
    <h1 style="color:green">
        GeeksforGeeks
    </h1>

    <h4>
        Reset Form using Reset Form
        or Form Submit Buttons
    </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>
        <br>

        <input type="submit" value="Submit" />

        <button id="resetBtn">
            Reset Form
        </button>
    </form>

    <script>
        $(document).ready(function () {
            $("#resetBtn").click(function (e) {
                //$("#d").trigger("reset"); 
                //$("#d").get(0).reset(); 
                e.preventDefault();
                $("#d")[0].reset()
            });
        }); 
    </script>
</body>

</html>

Output

Example 2: In this example we use jQuery to reset a form with ID d when the "Reset Form" button is clicked. It prevents the default behavior and ensures the form returns to its initial state.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>
        Reset a form using jQuery
        with reset() method
    </title>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
</head>

<body style="margin: 0 0 0 50px;">
    <h1>GeeksforGeeks</h1>

    <h4>
        Reset Form using Reset Form
        or Form Submit Buttons
    </h4>

    <form id="d" name="geek">
        <table cellspacing="0" cellpadding="3" border="1">
            <tr>
                <td>Username</td>
                <td>
                    <input type="text" name="name" />
                </td>
            </tr>
            <tr>
                <td>Email</td>
                <td>
                    <input type="email" name="email" />
                </td>
            </tr>
            <tr>
                <td>Password</td>
                <td>
                    <input type="password" />
                </td>
            </tr>
        </table>
        <br>

        <input type="submit" value="Submit" />

        <button id="resetBtn">
            Reset Form
        </button>
    </form>

    <script>
        $(document).ready(function () {
            $("#resetBtn").click(function(e) { 
                //$("#d").trigger("reset"); 
                //$("#d").get(0).reset(); 
                e.preventDefault();
                $("#d").get(0).reset() 
            }); 
        }); 
    </script>
</body>

</html>

Output:

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.