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

Reset gets anything 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.

JavaScript reset(): The reset() method resets the values of all elements in a form (same as clicking the Reset button).

Syntax for JavaScript reset button:

```
// type-1
<input type="reset">
```

// type-2
<input type="button" onclick="this.form.reset();">

// type-3
<input type="button" onclick="formname.reset();">

The button itself resets the form but, the type-1 and type-2, the reset button should be inside the form and type-3 can be either out or in.
But a reset button is a far better choice. (type-1)

```
<input type="reset">
```
Syntax for reset():
```
formObject.reset()
```
Syntax to convert jQuery element to a JavaScript object.
```
$(selector)[0].reset()
```
or
```
$(selector).get(0).reset()
```

If we don’t want to convert the jQuery element to a JavaScript object then we can use the trigger().

As trigger() method triggers the specified event and the default behavior of an event (like form submission) for the selected elements.
Syntax
$(selector).trigger(event, eventObj, ...)

Example:

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Try jQuery Online</title> 
    <script src= 
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> 
  </script> 
    <script> 
        $(document).ready(function() { 
            $("button").click(function() { 
                //$("#d").trigger("reset"); 
                //$("#d").get(0).reset(); 
                $("#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" action="/cgi-bin/test.cgi" 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> 
                <tr> 
                    <td align="center"></td> 
                    <td> 
                        <input type="submit" value="Submit" /> 
                    </td> 
                </tr> 
                <tr> 
                    <td align="center"></td> 
                    <td> 
                        <input type="reset" value="reset button" /> 
                    </td> 
                </tr> 
            </table> 
        </form> 
        <br> 
        <input type="button" 
               value="reset() outside form" 
               onclick="geek.reset();" /> 
        <button>resetby jQuery</button> 
    </center> 
</body> 
  
</html> 

Output

My Personal Notes

Recommended Posts: