How to Clear Form Data Using jQuery

Websolutionstuff | Jul-13-2021 | Categories : jQuery

In this small tutorial we will see how to clear form data using jquery.here we will reset form using jquery. many time we need to clear input data so here i will use reset function to clear all form data using jquery.

jQuery reset() function is used to clear or reset the input form fields, here i will give you some example to clear all form data using jquer or reset input value.

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>

 

Recommended Post
Featured Post
How To Get Multiple Checkbox Value In Javascript
How To Get Multiple Checkbox V...

In this article, we will see how to get multiple checkbox values in javascript. Here, we will learn to get the sele...

Read More

Jan-10-2023

Laravel 10 Send Bulk Mail Using Queue
Laravel 10 Send Bulk Mail Usin...

In this article, we will see laravel 10 send bulk mail using a queue. Here, we will learn about how to send bulk ma...

Read More

Mar-13-2023

How To Change Table Name Using Laravel 10 Migration
How To Change Table Name Using...

In this article, we will see how to change the table name using laravel 10 migration. Here, we will learn about the...

Read More

Apr-28-2023

Remove/Hide Columns While Export Data In Datatable
Remove/Hide Columns While Expo...

In this article, we will see remove or hide columns while exporting data in datatable. When we are using jquery dat...

Read More

Aug-24-2020