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.
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
}
Conclusion:
We explained about JavaScript reset() to reset your form fields. Now it becomes easy to use it.
4 Replies to “Reset Form Fields Using JavaScript”
I am in fact thankful to the holder of this web site who has shared this impressive article at at this
time.
Thanks for your appreciation……..!
keep reading our blog posts.
Thanks for this! helpful for beginners like me!
Your welcome Ian,
Keep following our posts for more coding tricks and knowledge.
Regards,
FormGet Team.