Values of textboxes in Modal not getting cleared after Modal is Hidden

Question

I know this question has been asked and i have tried these solutions but cant resolved this..

How clear bootstrap modal on hide

How to clear all input fields in bootstrap modal when clicking data-dismiss button?

But these solutions didnt resolve my problem,

I want to clear input fields on hidden of Modal popup

Here is my View

@model IEnumerable<Recon.Models.BRANCH_CONTACT_INFO>

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h4><b>Contact Person Detail</b></h4>

@*<p>
    @Html.ActionLink("Create New", "Create")
</p>*@
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">

        </div>
    </div>
</div>



<table class="table table-striped table-hover table-bordered">

    <tr class="info">
        <th>
            @Html.Label("Manager Name")
        </th>
        <th>
            @Html.Label("Designation")
        </th>
        <th>
            @Html.Label("Email 1")
        </th>
        <th>
            @Html.Label("Email 2")
        </th>
        @*<th>
                @Html.Label("Branch Name")
            </th>*@
        <th>
            @Html.ActionLink("Add", "Create_Branch_Contact_info", new { id = Session["Branchid"] }, new { @class = "btn default btn-xs green-stripe", data_toggle = "modal", data_target = "#myModal" })
        </th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.MANAGER_NAME)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.DESIGNATION.DESIGNATION1)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EMAIL1)

            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EMAIL2)

            </td>
            @*<td>
               @Html.DisplayFor(modelItem => item.BRANCH.BRANCH_DESC)
            </td>*@
            <td>

                @Html.ActionLink("Update", "Edit_Branch_Contact_info", new { id = item.BRANCH_CONT_ID }, new { @class = "btn default btn-xs blue-stripe" })
                @*@Html.ActionLink("Details", "Details", new { id = item.BRANCH_CONT_ID }) |*@
                @Html.ActionLink("Remove", "Delete","contact", new { id = item.BRANCH_CONT_ID }, new { @class = "btn default btn-xs red-stripe" })
            </td>
        </tr>
    }

</table>
@section script{

    <script>
        debugger;
        function myFunction() {
            debugger;
            //$('.modal').remove();


            document.getElementById("demo").innerHTML = "Hello World";
        }
        $('#myModal').on('hidden', function (e) {
            debugger;
            $(this)
              .find("input,textarea,select")
                 .val('')
                 .end()
              .find("input[type=checkbox], input[type=radio]")
                 .prop("checked", "")
                 .end();
        })

        $('[data-dismiss=modal]').on('click', function (e) {
            debugger;
            var $t = $(this),
                target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

            $(target)
              .find("input,textarea,select")
                 .val('')
                 .end()
              .find("input[type=checkbox], input[type=radio]")
                 .prop("checked", "")
                 .end();
        })


        $('body').on('hidden.modal', '.modal', function () {
            debugger;
            $(this).removeData('.modal');
        });


    </script>
}

As you can see in my view this is how i am calling my other view in Modal popup

@Html.ActionLink("Add", "Create_Branch_Contact_info", new { id = Session["Branchid"] }, new { @class = "btn default btn-xs green-stripe", data_toggle = "modal", data_target = "#myModal" })

And the other View where my modal is

@model Recon.Models.BRANCH_CONTACT_INFO

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@{

    Layout = "";
}

@using (Html.BeginForm()) 
{
    @Html.AntiForgeryToken()

     <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                @*<h4 class="modal-title" id="myModalLabel">Add Contact</h4>*@
            </div>
            <div class="modal-body" id="modal123">

                <div class="portlet box blue">
                    <div class="portlet-title">

                        <div class="caption">
                           Add Contact to Branch
                        </div>

                    </div>
                    <div class="portlet-body form">
                        <!-- BEGIN FORM-->
                        <form id="form" action="javascript:;" class="form-horizontal">
                            <div class="form-body">


                                <div class="portlet-body">

                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Manager Name</label>
                                                <div class="col-md-9">
                                                    @Html.TextBoxFor(model => model.MANAGER_NAME, new { @class = "form-control" })
                                                    @Html.ValidationMessageFor(model => model.MANAGER_NAME)

                                                </div>
                                            </div>
                                        </div>
                                   </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Designation</label>
                                                <div class="col-md-9">

                                                    @Html.DropDownList("DESIGNATION_ID", null, "Select Designation", new { @class = "form-control" })
                                                    @Html.ValidationMessage("DESIGNATION_ID")


                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Email 1</label>
                                                <div class="col-md-9">
                                                    @Html.TextBoxFor(model => model.EMAIL1, new { @class = "form-control" })
                                                    @Html.ValidationMessageFor(model => model.EMAIL1)

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Email 2</label>
                                                <div class="col-md-9">

                                                    @Html.TextBoxFor(model => model.EMAIL2, new { @class = "form-control" })
                                                    @Html.ValidationMessageFor(model => model.EMAIL2)

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="form-group">
                                                <label class="control-label col-md-3">Branch Name</label>
                                                <div class="col-md-9">

                                                  @Html.TextBox("BRANCH_NAME", (string)ViewBag.BranchName, new { @class = "form-control", @readonly = "readonly" })

                                                </div>
                                            </div>
                                        </div>
                                   </div>

                                    @Html.TextBox("BRANCH_ID", (Int16)ViewBag.BRANCH_ID, new { style = "display:none;" })



                                    </div>
                            </div>


                            <div class="form-actions">
                                <div class="row">
                                    <div class="col-md-6">
                                        <div class="row">
                                            <div class="col-md-offset-3 col-md-9">

                                                @*<input type="submit" value="Save" class=" btn default btn-xs blue-stripe " id="btnsave" />*@
                                                <button type="button" class="btn btn-default" onclick="myFunction()" data-dismiss="modal">Cancel</button>
                                                <input type="submit" value="Save"  class="btn blue" />
                                                @*@Html.ActionLink("Back to List", "Index", new { Trtype = @Session["Trtype"], Product_ID = @Session["Product_ID"] }, new { @class = "btn red" })*@

                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-6">
                                    </div>
                                </div>
                            </div>

                        </form>
                        <!-- END FORM-->
                        <p id="demo"></p>

                    </div>
                </div>




            </div>
            @*<div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <input type="submit" value="Delete" id="btnsave" class="btn btn-primary"/>
            </div>*@


}

I have tried these solutions using jquery but nothing works,

The first solution i tried is make a onclick event on Cancel button and call this function

 function myFunction() {
            debugger;
            $('.modal').remove();
        }

But it actually remove my whole modal popup i cant open my modal again

Second i tried this

 $('#myModal').on('hidden', function (e) {
            debugger;
            $(this)
              .find("input,textarea,select")
                 .val('')
                 .end()
              .find("input[type=checkbox], input[type=radio]")
                 .prop("checked", "")
                 .end();
        })

And This

  $('[data-dismiss=modal]').on('click', function (e) {
            debugger;
            var $t = $(this),
                target = $t[0].href || $t.data("target") || $t.parents('.modal') || [];

            $(target)
              .find("input,textarea,select")
                 .val('')
                 .end()
              .find("input[type=checkbox], input[type=radio]")
                 .prop("checked", "")
                 .end();
        })

And also this:

 $('body').on('hidden.modal', '.modal', function () {
        debugger;
        $(this).removeData('.modal');
    });

But they dont work

Dont know what i am doing Wrong please help!! Any suggestion will be appreciated

Answer 1

****Here you can do it as...****

Method1 :

$('#myModal').on('hidden.bs.modal', function (e) {
  var modal = $(this);//The modal which is opened
  modal.find("input").val("");//Clear all the input fileds inside that modal.
});

Method 2:

If that still doesn't work because you might be calling the inner content of the modal using partial pages then you can try to clear all fields inside the modal on opening.

$('#myModal').on('show.bs.modal', function (e) {
  var modal = $(this);//The modal which is opened
  modal.find("input").val("");//Clear all the input fileds inside that modal.
});