If you want to do JavaScript reset on your form fields go with this one line JavaScript code.

document.getElementById(selector).reset();

Some times it becomes very important to reset your form fields, here we explain how it can be done in simple way. We have to catch form by it’s ID and apply a javascript  reset() function on it.



Just click on live demo to see RESET fields functionality, follow the codes given below or download it to use.

 reset form fields using javascript

 

 

HTML file: reset_form.html


<!DOCTYPE html>
<html>
<head>
<title>Reset form fields value using JavaScript - Demo Preview</title>
<meta content="noindex, nofollow" name="robots">
<!-- Include CSS File Here -->
<link href="css/reset_form.css" rel="stylesheet">
<!-- Include JS File Here -->
<script src="js/reset_form.js"></script>
</head>
<body>
<div id="main">
<!--=================================================================
First Div For Form
===================================================================-->
<div id="first">
<h1>Please fill this form and check reset button.</h1>
<form id="myform" name="myform">
<label>First name :</label><br>
<input id="fname" name="fname" placeholder="First Name" type="text"><br><br>
<label>Last name :</label><br>
<input id="lname" name="lname" placeholder="Last Name" type="text"><br><br>
<label>Email :</label><br>
<input id="email" name="email" placeholder="Email" type="text"><br><br>
<label>Contact No. :</label><br>
<input id="contact" name="contact" placeholder="Contact No." type="text"><br><br>
<input align="middle" id="button" onclick="resetform()" type="button" value="Reset Form">
</form>
</div>
</div>
</body>
</html>

JS File: reset_form.js

This file contains javascript one line function to reset form fields.


function resetform() {
document.getElementById("myform").reset();
}

CSS file: reset_form.css


@import "http://fonts.googleapis.com/css?family=Rokkitt";
/*-------------------------------------------------------------
CSS for Required Elements .
------------------------------------------------------------*/
h1,p{
clear:both;
margin-bottom:15px;
text-align:center
}
hr{
margin-bottom:20px
}
div#main{
width:900px;
height:500px;
margin:20px auto;
font-family:'Rokkitt',serif
}
div#first{
width:400px;
padding:0 40px 20px;
float:left;
background-color:#dcdcdc;
margin:10px
}
label{
font-size:20px
}
input{
width:390px;
height:30px;
font-size:14px;
box-shadow:0 0 5px;
-webkit-box-shadow:0 0 5px;
/* For Chrome & Safari Browser */
-moz-box-shadow:0 0 5px;
/* For Mozilla Web Browser */
border-style:none;
margin-top:5px;
padding-left:10px
}
#button{
display:block;
margin:0 auto;
width:100px;
font-family:'Rokkitt',serif;
box-shadow:0 0 5px;
text-shadow:1px 1px 1px #949494;
background-color:silver;
font-size:18px
}

Pabbly Form Builder


Conclusion:

We explained about JavaScript reset() to reset your form fields. Now it becomes easy to use it.