How To Reset Form Using jQuery

In this article, we will see how to reset the form using jquery. here we will reset the form using jquery. many times we need to clear input data after submitting the form. jQuery reset() function is used to clear or reset the input form fields.

So, let's see clear all form data using jquery, reset the form after ajax submit jquery, reset form jquery after submit, how to clear form data using jquery, how to clear form in jquery, clear all input fields javascript.

Example 1:

In this example, we will use the reset() function and clear the form.

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How To Rest Form Using jQuery - Techsolutionstuff</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:

In this example, we will on the button click get the form and reset the form.

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How To Reset Form Using jQuery - Techsolutionstuff</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:

In this example, we will trigger the reset form on the button click.

<html lang="en">
 <head>
 <meta charset="utf-8">
 <title>How To Reset Form Using jQuery - Techsolutionstuff</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>

 


You might also like :

RECOMMENDED POSTS

FEATURE POSTS