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>

 

 

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.

 

Recommended Post
Featured Post
What Is Digital Marketing?
What Is Digital Marketing?

Digital marketing is the component of marketing that utilizes internet and online bas...

Read More

Oct-19-2021

How to Create Zip File in Ubuntu using Command
How to Create Zip File in Ubun...

Hey folks! If you're anything like me, sometimes you just want a quick and straightforward way to bundle up a bunch...

Read More

Jan-24-2024

7+ Laravel tips: DB Models and Eloquent (2023)
7+ Laravel tips: DB Models and...

Welcome to our latest guide on mastering Laravel's DB Models and Eloquent, updated for 2023. If you're a web dev...

Read More

Nov-08-2023

How to Upload Image to Storage Folder in Laravel 10
How to Upload Image to Storage...

As I delve into Laravel 10, a true powerhouse in the realm of PHP frameworks, I've found it to be a game-changer for...

Read More

Sep-29-2023