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>

 

Featured Post




Follow us
facebooklogo github instagram twitter