Mon -
Sun 8.00 AM - 8.00 PM
JavaScript
)
In this tutorial we will see how to reset or clear a form using JavaScript with .reset() method.
Follow below steps to reset or clear a form using JavaScript .reset() method.
Step 1 - Create a form with id="reset" and add input field inside <form> tag according to your need.
In first step you need to create a form with id="reset" (you can take any id name but make sure that same id name used inside step 3 script code where id called) input fields and submit button.
Syntax -
<form id="reset">
<label> input name </label>
<input type=" " name=" "/>
<button type="submit" > Submit </button>
</form>
Step 2 - Create a input/button with type="button" and create a onclick function inside it.
In second step you need to create input/button with type="button" and also create onclick function.
Syntax -
<form>
<label> input name </label>
<input type=" " name=" "/>
<input type="button" onclick="newFunction()" value="reset"/>
<button type="submit" > Submit </button>
</form>
Step 3 - Now put below script code inside <body> tag.
In third step you need to insert Script code inside body tag.
Syntax -
<script>
function newFunction(){
document.getElementById("reset").reset() ;
}
</script>
Now you can reset or clear a form with reset button.
Below code is combination of all the above steps :-
For Example -
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- bootstrap cdn start -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"
integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous">
</script>
<!-- bootstrap cdn end -->
<!-- style start-->
<style>
.vertical-center {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.input_field_class {
border: 2px solid white;
box-sizing: border-box;
box-shadow: 5px 5px 5px 5px grey;
}
</style>
<!-- style end -->
</head>
<body>
<div class="container-fluid" style="overflow-x: hidden;">
<div class="row vertical-center mt-4 mx-4">
<!-- main form start -->
<div
style="width:600px;height:auto;border:10px solid white;box-sizing:border-box;box-shadow:5px 5px 5px 5px grey , grey 5px 5px 5px 5px inset;border-radius:150px 5px 150px 5px;margin-bottom:30px">
<!-- form div start here -->
<div class='mx-5 mb-2'>
<form action="" method="" id="reset">
<label for="full_name" style="font-weight: 600;" class="form-group mt-5">Full Name :</label>
<input type="text" name="full_name" id="full_name" placeholder="Full name"
class="form-control input_field_class" required> <br>
<label for="email" style="font-weight: 600;" class="form-group">Email Id :</label>
<input type="text" name="email" id="email" placeholder="Email Address"
class="form-control input_field_class" required><br>
<label for="dob" style="font-weight: 600;" class="form-group">Date Of Birth :</label>
<input type="date" name="dob" id="dob" placeholder="dob" class="form-control input_field_class"
required><br>
<label for="your_self" style="font-weight: 600;" class="form-group ">About Yourself :</label>
<textarea name="your_self" id="your_self" class="form-control input_field_class"></textarea><br>
<div class="d-flex justify-content-around mt-4 mb-3"><input type="button" class="btn btn-danger"
onclick="newFunction()" value="Reset"><button type="submit" id="btn"
class="btn btn-dark">Submit</button></div>
</form>
</div>
<!-- form div end here -->
</div>
<!-- main form end -->
</div>
</div>
<!-- js start here -->
<script>
function newFunction() {
document.getElementById("reset").reset();
}
</script>
</body>
</html>
Output
