Clear all fields in a form using Jquery

                                       Clear / Reset Buttons
Clear Button: When you clear a form, you would be removing ALL values from the form.
Reset Button: When you resets a form, it will resets the original values of all fields in a form.
OR 
Reset all form fields to their default values.
  ModelClass for this Example 
    public partial class EmployeeDetail
    {
        public int Id { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Gender { get; set; }
        public string City { get; set; }
        public string State { get; set; }
        public string Address { get; set; }
       [Display(Name="Languages Known")]
        public string Languages { get; set; }
        public Nullable<decimal> Salary { get; set; }
        public Nullable<System.DateTime> HireDate { get; set; }
        public string Email { get; set; }
     }

}
Create.cshtml
@model Demo.Models.EmployeeDetail
@{
    ViewBag.Title = "Create";   
}
<h2>Create</h2>
@using (Html.BeginForm("Create", "Employee", FormMethod.Post, new {id="createform" }))
{
    @Html.ValidationSummary(true)
 <fieldset>
        <legend>Employee Detail</legend>
   <table>
           <tr><td>@Html.LabelFor(model => model.FirstName)</td>
               <td>  @Html.EditorFor(model => model.FirstName)
             @Html.ValidationMessageFor(model => model.FirstName)</td>
           </tr>
           <tr>
               <td> @Html.LabelFor(model => model.LastName)</td>
               <td>@Html.EditorFor(model => model.LastName)
               @Html.ValidationMessageFor(model => model.LastName)</td>
           </tr>
            <tr>
               <td>@Html.LabelFor(model => model.Gender)</td>
               <td>
             @Html.RadioButton("Gender", "male")Male
             @Html.RadioButton("Gender", "female")Female
             @Html.ValidationMessageFor(model => model.Gender)
               </td>
           </tr>
          <tr><td>@Html.LabelFor(model => model.City)</td><td>              @Html.DropDownList("City", new List<SelectListItem>
            {
              new SelectListItem { Text ="Hyderabad",Value="Hyderabad"},
              new SelectListItem { Text = "Amaravati",Value="Amaravati"}
            },"-------------Select----------")
            @Html.ValidationMessageFor(model => model.City)
            @Html.ValidationMessageFor(model => model.City)</td></tr>
            <tr><td>@Html.LabelFor(model => model.State)</td><td>  @Html.DropDownList("State", new List<SelectListItem>
            {
              new SelectListItem { Text ="Telangana",Value="Telangana"},
              new SelectListItem { Text ="Andhra Pradesh",Value="Andhra Pradesh"},
            },"-----------Select------------")
            @Html.ValidationMessageFor(model => model.State)
            @Html.ValidationMessageFor(model => model.State)</td></tr>
            <tr><td> @Html.LabelFor(model => model.Address)</td><td> @Html.TextAreaFor(model => model.Address)
            @Html.ValidationMessageFor(model => model.Address)</td></tr>
            <tr><td> @Html.LabelFor(model => model.Languages)</td><td>
                @Html.CheckBox("Lang", "english") English
                 @Html.CheckBox("Lang", "hindi") Hindi
                 @Html.CheckBox("Lang", "telugu") Telugu
                 
            @Html.ValidationMessageFor(model => model.Languages)</td></tr>
            <tr><td> @Html.LabelFor(model => model.Salary)</td><td> @Html.EditorFor(model => model.Salary)
            @Html.ValidationMessageFor(model => model.Salary)</td></tr>
           <tr><td>
                @Html.LabelFor(model => model.HireDate)
               </td>
               <td>@Html.TextBoxFor(m => m.HireDate, "{0:MM/dd/yyyy}", new { @class = "datepicker" })
                   @Html.ValidationMessageFor(model => model.HireDate) </td>
           </tr>
        @*   <tr><td> @Html.LabelFor(model => model.MobileNo)</td>
               <td> @Html.EditorFor(model => model.MobileNo)
                  @Html.ValidationMessageFor(model => model.MobileNo)</td>
           </tr>*@
            <tr><td>@Html.LabelFor(model => model.Email)</td>
               <td> @Html.EditorFor(model => model.Email)
            @Html.ValidationMessageFor(model => model.Email)</td>
           </tr>
     </table>
          <p>
            <input type="reset" value="Reset" />
            <input type="button" value="Clear" id="clearform" />
        </p>
    </fieldset>
}

<script>
    $(document).ready(function () {
         $('#clearform').on('click', function () {
            $('#createform').find('input:text, input:password, select, textarea').val('');
            $('#createform').find('input:radio, input:checkbox').prop('checked', false);
        });
          $('.datepicker').datepicker();
       })
    </script>

Note: Add these scripts in Layout
    <script src="~/Scripts/jquery-1.7.1.min.js"></script>
   <script src="~/Scripts/jquery-ui-1.8.20.js"></script>

   <link href="~/Content/jquery-ui.css" rel="stylesheet" />

Note : Here The reset function does the same if we write
    input type="reset" in the form and clicked it.
It will reset the values in all fields in the form to the value they had when the page loaded.