隐藏模态后，模态中文本框的值没有被清除
Values of textboxes in Modal not getting cleared after Modal is Hidden
我知道这个问题已经被问到，我已经尝试了这些解决方案，但无法解决这个问题。
如何清除bootstrap modal on hide
如何清除所有输入字段在引导模式时，单击数据解散按钮?
但是这些解决方法并没有解决我的问题，
我想清除输入字段隐藏的模式弹出
这是我的视图
@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" })
另一个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">×</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');
});
但是它们不起作用
不知道我做错了什么，请帮助!!如有任何建议，我们将不胜感激* * * *在这里你可以为…* * * *
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.
});
方法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.
});
相关文章：
- 我想使用模态通过php文件发送邮件，并且我希望在提交关闭后关闭pop
- 打开一个模态并将其链接到AngularJS中的指令
- SemanticUI模态not onDeny/onApprove事件未激发
- 有没有比在app.js上绑定模块名称更好的方法来动态加载视图模型和视图以显示模态
- 如何通过所选索引(AngularJS）在模态弹出窗口中显示数据
- 包含数据库中相关信息的开放模态
- bootstrap消除模态并显示另一个模态
- 模态提示-如何重写此代码
- 模态框无法正常工作
- 将数据传递给由服务创建的Ionic模态
- iframe模态无法关闭
- 点击AngularJS模态窗口捕捉背景事件
- jqueryajax调用是复制url，当在模态视图之后在外部js文件中进行调用时
- 使用模态对话框(JQuery）编辑函数
- 如何在模态实例中使用filter
- 离子模态:在单击/取消时清除所有字段
- 关闭模态不't清除文本区域数据，但它确实清除了模型
- KnockoutJS/Bootstrap-使用javascript关闭模态时清除模态形式
- 隐藏模态后，模态中文本框的值没有被清除
- 如何在提交后清除模态值
