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>

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>

Read Also : Image Upload in Summernote Editor Using Laravel

Tags : PHP jQuery