A quick reset of the form fields is possible with this jQuery reset function.


$(selector)[0].reset();

In our previous blog, we explained you how to reset form fields using javascript. Now in this blog, we will explain you to do the same using single line jQuery Code.



Sometimes it becomes very important to reset your form fields, here we have explained how it can be done in simple way. We have to catch form by it’s Id and apply a jQuery reset() function on it.

 


Just click on live demo to see how form functionality works,  follow the codes given below or download it to use.

jQuery-reset-form


HTML file: resetjquery.html

Given below our HTML codes to create simple form.

<!DOCTYPE html>
<html>
<head>
<title>Reset Form Using jQuery - Demo Preview</title>
<meta name="robots" content="noindex, nofollow">
<!-- Include CSS File Here -->
<link rel="stylesheet" href="css/style.css"/>
<!-- Include JavaScript File Here -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="js/reset.js"></script>
</head>
<body>
<div class="container">
<div class="main">
<h1>Reset Form Using jQuery</h1>
<form action="#" method="post" id="form">
<label>Name :</label>
<input type="text" name="name" />
<label>Email :</label>
<input type="text" name="email" />
<label>Gender :</label>
<input type="radio" name="sex" value="male">Male
<input type="radio" name="sex" value="female">Female
<label>Message :</label>
<textarea name="textarea" ></textarea>
<label>Language Known :</label>
<input type="checkbox" name="vehicle" value="Bike">English
<input type="checkbox" name="vehicle" value="Car">French
<input type="button" id="btn" value="Reset" />
</form>
</div>
</div>
</body>
</html>

 

jQuery File: reset.js

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

$(document).ready(function(){
$("#btn").click(function(){
/* Single line Reset function executes on click of Reset Button */
$("#form")[0].reset();
});});

 

CSS file: style.css

Styling HTML elements.

/* Below line is used for online Google font */
@import url(http://fonts.googleapis.com/css?family=Droid+Serif);
h1{
text-align: center;
font-size: 25px;
}
div.container{
width: 960px;
height: 610px;
margin:50px auto;
font-family: 'Droid Serif', serif;
position:relative;
}
div.main{
width: 320px;
float:left;
padding: 10px 60px 40px;
background: ghostwhite;
border: 1px dotted #ccc;
box-shadow: 0 0 10px;
border-radius: 2px;
font-size: 13px;
}
input[type=text],textarea {
width: 97.7%;
height: 34px;
padding-left: 5px;
margin-bottom: 20px;
margin-top: 8px;
box-shadow: 0 0 5px;
border: 1px solid #b7b7b7;
color: #4f4f4f;
font-size: 16px;
}
textarea{
height: 60px;
resize: none;
}
input[type=radio],[type=checkbox]{
margin:10px 10px 0 10px;
}
label{
color: #464646;
text-shadow: 0 1px 0 #fff;
font-size: 14px;
font-weight: bold;
}
#btn{
font-size: 17px;
border: 1px solid gray;
padding: 7px 35px;
background-color: #E3B5F5;
font-weight:bold;
box-shadow: 0 0 5px;
border-radius: 2px;
cursor: pointer;
width:100%;
}

Pabbly Form Builder


Conclusion:

Here you have seen one of the basic method of jQuery to reset form fields. Keep reading our blogs and also provide us your valuable feedback and suggestions in the below provided space.