Resetting a multi-stage form with jQuery

In this tutorial, we'll discuss how to reset an HTML multi-stage form using jQuery?
Submitted by Pratishtha Saxena, on August 11, 2022

Resetting a form is sometimes needed while filling up a form. If the user has filled the form but wants to go for a few changes throughout it, then instead of unchecking each checkbox & radio button, deleting the text in the textboxes one by one, the form should be cleared all at once. This can be achieved dynamically using jQuery.

jQuery reset() Method

This is a jQuery built-in method, which helps clear up all the input values within a form in one go.

Syntax:

$(selector)[0].reset();

The form is selected using the appropriate selector and then it is reset using the reset() method. This reset method can be set as a function for a click event of a button.

Let's understand this better with the help of an example:

Example to reset a multi-stage form with jQuery

HTML:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <title>Title</title>
  </head>
  
  <body>
  
    <center>
      <form id="myForm">
        <label>Name: </label>
        <input type="text"> <br><br>
		
        <label>Age: </label>
        <input type="number"><br><br>
		
        <label>Email: </label>
        <input type="email"><br><br>
		
        <label>Address: </label>
        <input type="textarea"><br><br>
		
        <label>Gender: </label>
        <input type="radio">Female
        <input type="radio">Male<br><br>
		
        <label>Education: </label>
        <input type="checkbox">X
        <input type="checkbox">XII
        <input type="checkbox">Graduation<br><br>
		
        <input type="button" id="resetForm" value="Reset">   <input type="button" value="Submit">
      </form>
    </center>
  </body>
  
</html>

jQuery:

$(document).ready(function() {
    $("#resetForm").click(function() {
        $("#myForm")[0].reset();
    });
});

Output:

Example 1: Resetting a multi-stage form

After clicking on "Reset" button.

Example 2: Resetting a multi-stage form





All jQuery Examples

Comments and Discussions!

Load comments ↻





Copyright © 2024 www.includehelp.com. All rights reserved.