How can I use the “$.fn.reset” function in jQuery to design a reset button in a form?

139    Asked by AnneBell in Web-development , Asked on Jan 24, 2024

There is a scenario where I have a form with various fields. Thus I want to execute a “reset” button which when clicked all inputs would be reset to their starting or initial values. How can I use the $.fn.reset function in jQuery to achieve this particular target? 

Answered by Danilo Guidi

 In the context of web development, you can use the reset jQuery to design a reset button in your particular database which can reset typed values to initial values when clicked on by the users. For this, you would need to follow several steps which are following:-

Attach a click event handler to the “reset” button

$(‘#resetButton’).on(‘click’, function() {
Within the event handler, you can use the “$.fn.reset” in jQuery function for resetting the form:
$(‘#yourFormId’)[0].reset();
You can also replace “yourFormId” with your actual ID of the form.
Close the click event handler
“});

Here is a complete example given:-




  <meta</span> charset=”UTF-8”>

  <meta</span> name=”viewport” content=”width=device-width, initial-scale=1.0”>

  Reset Form Example

  [removed][removed]



 


    Name:

   

    Email:

   

   

 


  [removed]

    $(document).ready(function() {
      $(‘#resetButton’).on(‘click’, function() {
        $(‘#exampleForm’)[0].reset();
      });
    });

  [removed]



Thus above example would help you in having a form with the ID “exampleForm” and a reset button with the ID “resetButton”. You can adjust the ID according to the structure of the HTML.



Your Answer

Interviews

Parent Categories