Boostrap Modal内部的表单不会重置 [英] Form inside Boostrap Modal does not reset
问题描述
我正在使用以下点击事件来重置表单.
I am using below click event to reset Form.
'click .resetBulkAssignForm' : function(events, template){
console.log('Reset', $(".bulkAssignForm")[0]);
$(".bulkAssignForm")[0].reset();
$(".bulkAssignForm").find("select").val("");
$('#firmName').select2('data', null);
},
我也尝试了SO上可用的大多数答案来解决此问题.
I also tried most of the answers available on SO to solve this issue.
问题:如何在Bootstrap Modal中重置表单?
Question: How to reset form inside Bootstrap Modal?
下面是带有控制台输出的模态图像.
Below is the image of the modal with console output.
注意:我正在使用AdminLTE 2.3.11,Select2.另请注意,我已经在SO链接(例如how-to-reset-form-body-in-bootstrap-modal-box
添加HTML代码以备不时之需.
Adding HTML Code in case you need to see.
<div id="myBulkModal" class="modal fade modal-primary" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title">Bulk Assignment</h2>
</div>
<div class="modal-body">
<section class="content">
<form class="bulkAssignForm">
<fieldset>
<div class="row">
<input type="hidden" id="taskIdInput" value="{{getTaskId}}" />
</div>
<div class="row">
<div class="input-group col-sm-12">
<label for="firmName">Firms</label><br />
<select id="firmName" multiple class="form-control input-lg" required>
{{#each firmNamesFromAssignment}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="assignee">Assignee</label><br />
<select id="assignee" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<div class="input-group col-sm-12">
<label for="reviewedBy">Reviewer</label><br />
<select id="reviewedBy" class="form-control input-lg" required>
<option selected="selected" value="">Select Option</option>
{{#each usersSelect2}}
<option value="{{value}}">{{label}}</option>
{{/each}}
</select>
</div>
</div>
<br />
<div class="row">
<!-- buttons -->
<button type="submit" class="btn btn-outline">
<span class="glyphicon glyphicon-ok"></span> Assign
</button>
<button type="button" class="btn btn-outline resetBulkAssignForm">
<span class="glyphicon glyphicon-off"></span> Reset
</button>
<button type="button" class="btn btn-outline" data-dismiss="modal">
<span class="glyphicon glyphicon-refresh"></span> Close
</button>
</div>
</fieldset>
</form>
</section>
</div>
</div>
</div>
</div>
推荐答案
更改Select2
的基础<select>
或<input>
的值后,您必须触发change
事件,以便此更改将由Select2
代码并正确渲染:
After changing value of Select2
's underlying <select>
or <input>
you have to trigger change
event so this change will be handled by Select2
code and rendered appropriately:
$(".bulkAssignForm").find("select").val("").trigger("change");
已成功在 AutoForm Demo
测试页 上进行了测试.
Successfully tested on AutoForm Demo
test page.
这篇关于Boostrap Modal内部的表单不会重置的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!