<!DOCTYPE html>
<html>
<head>
<title>Form reset() Method VS jQuery Form Input Reset Example</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<h4>Using jQuery Input Reset</h4>
<form action="#">
<input type="text" placeholder="Name" id="name">
<br>
<input type="text" placeholder="Email" id="email">
<br>
<input type="button" value="Submit" onclick="submitForm1()">
</form>
<br>
<hr>
<br>
<h4>Using Form reset() method</h4>
<form action="#" id="form2">
<input type="text" placeholder="Name">
<br>
<input type="text" placeholder="Email">
<br>
<input type="button" value="Submit" onclick="submitForm2()">
</form>
<script>
// reset using input ID
function submitForm1() {
// form logic or AJAX request here
var nameInput = $("#name");
var emailInput = $("#email");
nameInput.val("");
emailInput.val("");
}
// reset using form .reset() method
function submitForm2() {
// form logic or AJAX request here
document.getElementById("form2").reset();
}
</script>
</body>
</html>