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.
<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 this article, we will see how to get multiple checkbox values in javascript. Here, we will learn to get the sele...
Jan-10-2023
In this article, we will see laravel 10 send bulk mail using a queue. Here, we will learn about how to send bulk ma...
Mar-13-2023
In this article, we will see how to change the table name using laravel 10 migration. Here, we will learn about the...
Apr-28-2023
In this article, we will see remove or hide columns while exporting data in datatable. When we are using jquery dat...
Aug-24-2020