javascript - 隐藏模态后，模态中文本框的值不会被清除

Question

我知道有人问过这个问题，我已经尝试过这些解决方案，但无法解决这个问题..

How clear bootstrap modal on hide

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

但是这些解决方案并没有解决我的问题，

我想清除模态弹出窗口隐藏的输入字段

这是我的观点

@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>
}

正如您在我的 View 中看到的，这就是我在模态弹出窗口中调用其他 View 的方式

@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" })

还有我的模态所在的另一个 View

@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>*@


}

我已经使用 jquery 尝试过这些解决方案，但没有任何效果，

我尝试的第一个解决方案是在“取消”按钮上创建一个 onclick 事件并调用此函数

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

但它实际上删除了我的整个模式弹出窗口，我无法再次打开我的模式

第二次我尝试了这个

 $('#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');
    });

但是它们不起作用

不知道我在做什么，错误请帮助!任何建议将不胜感激

Answer 1

****在这里你可以这样做......****

方法1:

$('#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.
});

方法 2:

如果这仍然不起作用，因为您可能使用部分页面调用模式的内部内容，那么您可以尝试在打开时清除模式内的所有字段。

$('#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.
});