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>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
