How to Clear Form Data Using jQuery

Websolutionstuff | Jul-13-2021 | Categories : jQuery

In this concise tutorial, we will explore the process of clearing form data efficiently using jQuery. We will focus on resetting forms using jQuery, a useful skill for enhancing user experience.

There are various scenarios where you may need to clear input data from a form, and in this tutorial, we will employ the jQuery reset() function to achieve this. We will provide you with clear examples demonstrating how to reset or clear input form fields using jQuery, ensuring that your web forms offer a seamless user experience

Example 1:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How to Clear Form Data Using jQuery - websolutionstuff.com</title>
 </head>
 <body>
  <form id="Form1">
   <label>First Name:</label>
   <input type="text" name="name">
   <input type="submit" value="Submit">
  </form>
  <button type="button" onclick="resetForm();">Reset</button>
 </body>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
 function resetForm() {
   document.getElementById("Form1").reset();
 }
 </script>
</html>

Read Also: How to Convert Excel File into JSON in Javascript

Example 2:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How to Clear Form Data Using jQuery - websolutionstuff.com</title>
 </head>
 <body>
  <form id="Form">
   <label>First Name:</label>
   <input type="text" name="name">
   <input type="submit" value="Submit">
  </form>
  <button type="button" id=""btn1">Reset</button>
 </body>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
 $(document).ready(function(){
 $("#btn1").click(function(){
 $("#form")[0].reset();
 });});
 </script>
</html>

Example 3:

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How to Clear Form Data Using jQuery - websolutionstuff.com</title>

</head> 
<body>
 <form action="#" method="post" id="form1">
 <label>First Name:</label>
 <input type="text" name="fname">
 <input type="submit" value="Submit">
 </form>
 <br>
 <button type="button" class="reset1">Reset Button</button>
</body>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
 $(document).ready(function(){
  $(".reset1").click(function(){
   $("#form1").trigger("reset");
  });
 }); 
 </script> 
</html>

Conclusion:

In conclusion, we've learned how to efficiently clear form data using jQuery. This skill is valuable in web development, as it allows you to enhance the user experience by providing a straightforward way for users to reset input fields in web forms.

By using the jQuery reset() function, we've seen how to clear or reset input form fields with ease.

Read Also: Image Upload in Summernote Editor Using Laravel

Tags : PHP jQuery