隐藏模态后，模态中的文本框值未被清除

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

提问人：Mussaib Siddiqui 提问时间：10/14/2016 最后编辑：CommunityMussaib Siddiqui 更新时间：10/14/2016 访问量：2234

问：

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

隐藏时如何清除引导模式

单击data-dismiss按钮时如何清除bootstrap模式中的所有输入字段？

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

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

这是我的观点

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

正如你所看到的，在我的视图中，这就是我在模态弹出窗口中调用我的另一个视图的方式

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

另一个视图，我的模态在哪里

@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');
    });

但它们不起作用

不知道我做错了什么，请帮忙！！ 任何建议将不胜感激

javascript jquery html asp.net-mvc twitter-bootstrap

评论

0赞 Badr 10/14/2016
我认为您需要结合您描述的第二和第四种解决方案。
0赞 Mussaib Siddiqui 10/14/2016
你能解释一下，怎么样？
0赞 Bon Macalindong 10/14/2016
你在哪里调用附加模态事件的脚本？
0赞 Badr 10/14/2016
您需要将 UI 元素清除为其默认值，并且还需要重置模态对象中的数据，以便在 Show 事件中它不会再次填充数据。希望现在清楚了
0赞 Mussaib Siddiqui 10/14/2016
在我的第一视角@BonMacalindong

答：

1赞 Anil Panwar 10/14/2016 #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.
});

评论

0赞 Mussaib Siddiqui 10/14/2016
伙计，你救了我的命......另一个问题是实际上有一个 submit 类型的输入文本，此方法也清除了该输入。
0赞 Anil Panwar 10/14/2016
使用 modal.find（“input[type=text]”）.val（“”）;如果有帮助，请投赞成票。

上一个：将焦点放在数组中的对象元素上

下一个：如何在Windows服务中回滚？