How to Clear Form Data Using jQuery
Websolutionstuff | Jul-13-2021 | Categories : jQuery
In this concise tutorial, we will explore the process of clearing form data efficiently using jQuery. We will focus on resetting forms using jQuery, a useful skill for enhancing user experience.
There are various scenarios where you may need to clear input data from a form, and in this tutorial, we will employ the jQuery reset() function to achieve this. We will provide you with clear examples demonstrating how to reset or clear input form fields using jQuery, ensuring that your web forms offer a seamless user experience
<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>
<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>
<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>
In conclusion, we've learned how to efficiently clear form data using jQuery. This skill is valuable in web development, as it allows you to enhance the user experience by providing a straightforward way for users to reset input fields in web forms.
By using the jQuery reset() function, we've seen how to clear or reset input form fields with ease.
Recommended Post
Featured Post
Laravel 8 Autocomplete Search...
In this article, we will see the laravel 8 autocomplete search from the database. Using ajax autocomplete...
Mar-01-2021
Export Buttons In Datatable
In this tutorial i will show you How To Add Export Buttons In Datatable, If you want to export DataTable data...
Sep-02-2020
How To Create Custom Middlewar...
In this article, we will see how to create custom middleware in laravel 9. Laravel middleware provides a conve...
Mar-27-2022
Laravel 8 Multiple Database Co...
Hello Freinds, In this tutorial we will see laravel 8 multiple database connections. Today I will give you step by st...
Apr-19-2021