twitter-bootstrap 关闭时重置/清除模态表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/47365580/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-10-22 01:08:49 来源:igfitidea点击:
Reset/clear modal form on closing it
提问by Swati Singh
I am trying to reset/clear my form inside the modal when I close it but this does not seem to work. This is my code:
当我关闭它时，我试图在模态中重置/清除我的表单，但这似乎不起作用。这是我的代码：
<a href = "#myModal" data-toggle="modal" data-target = "#edit-modal"><span class = "glyphicon glyphicon-tag"></span></a>
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add tags</h4>
</div>
<div class="modal-body">
<form name = "form2" id = "form2" method = "post" action = "{% url 'savetag' %}" class = "form-inline">
{% csrf_token %}
<div class = "form-group">
<input name = "tag" id = "tag" required>
<button type = "submit" class = "btn btn-danger">Save</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
$('#edit-modal').on('hidden.bs.modal', function(e){
$(this).find('form2')[0].reset();
});
</script>
Can someone guide me on what needs to be corrected.Thanks This is fiddle link
有人可以指导我需要纠正什么。谢谢这是小提琴链接
采纳答案by Vipin Kumar
Change following line of code from
更改以下代码行
$(this).find('form2')[0].reset();
to
到
$(this).find('#form2')[0].reset();
Edited
已编辑
Please check following code
请检查以下代码
$('#edit-modal').on('hidden.bs.modal', function(e) {
$(this).find('#form2')[0].reset();
});<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#edit-modal">
Launch demo modal
</button>
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add tags</h4>
</div>
<div class="modal-body">
<form name="form2" id="form2" method="post" action="{% url 'savetag' %}" class="form-inline">
{% csrf_token %}
<div class="form-group">
<input name="tag" id="tag" required>
<button type="submit" class="btn btn-danger">Save</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>回答by Pedram
Use document.getElementById("form2").reset();or $('#form2')[0].reset();
使用document.getElementById("form2").reset();或$('#form2')[0].reset();
$("#myBtn").click(function() {
document.getElementById("form2").reset();
$("#edit-modal").modal();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="edit-modal" class="modal fade" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Add tags</h4>
</div>
<div class="modal-body">
<form name="form2" id="form2" method="post" action="{% url 'savetag' %}" class="form-inline">
{% csrf_token %}
<div class="form-group">
<input name="tag" id="tag" required>
<button type="submit" class="btn btn-danger">Save</button>
</div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<script>
</script>
<button type="button" data-toggle="modal" id="myBtn">Open Modal</button>Or resetit on call:
或者reset它在call：
$('#edit-modal').on('hidden.bs.modal', function (e) {
document.getElementById("form2").reset(); //or $('#form2')[0].reset();
})
