How to Clear Form Data jQuery

How to Clear Form Data jQuery

In this example i will show how to clear form data jquery. some time you need to clear form data on button click jquery. i provide you example of jquery clear form data.

In this example you learn jquery clear form data. We will explain step by step how to reset a form using jquery. i will give you simple reset form after submit jquery. we will discuss on how to clear input data in jquery. I will explain jquery reset form after submit.

Read Also :  Contact Form Validation in jQuery

jQuery Reset Form Data Fields

Syntax : jquery clear form data

formObject.reset();

Syntax to convert jQuery element to a JavaScript object.

$(selector)[0].reset()

or

$(selector).get(0).reset()

Example :1 

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Clearn Form Data Using jQuery</title>
 <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
 <script>
 $(document).ready(function(){
  $(".reset-btn").click(function(){
   $("#myForm").trigger("reset");
  });
 }); 
</script> 
</head> 
<body>
 <form action="/examples/html/action.php" method="post" id="myForm">
 <label>First Name:</label>
 <input type="text" name="first-name">
 <input type="submit" value="Submit">
 </form>
 <br>
 <button type="button" class="reset-btn">Reset Button</button>
</body>
</html>

Example :2

<!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Reset Form Using JavaScript</title>
 <script>
 function resetForm() {
   document.getElementById("myForm").reset();
 }
 </script>
 </head>
 <body>
  <form action="/examples/html/action.php" method="post" id="myForm">
   <label>First Name:</label>
   <input type="text" name="first-name">
   <input type="submit" value="Submit">
  </form> <br>
  <button type="button" onclick="resetForm();">Reset Button</button>
 </body>
 </html>

I hope you understand of how to clear form data in jquery and it can help you…