javascript - jQuery Bootstrap - 在模式关闭时重置表单值

Question

我有一个仅包含一个表单字段的模式，但是一旦用户输入此值，即使模式关闭，它仍然存在。我希望它在关闭时重置，以便再次打开模式时，表单为空。我已经有一些代码，但是它没有按预期工作。如果有人能提供帮助，我们将不胜感激。

HTML/模态:

<!-- Modal -->
<div id="myModalViewAddress" class="modal fade" role="dialog">
    <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">View Hidden Information</h4>
            </div>
            <div class="modal-body">
                <p>Please enter authorisation code</p>
                <form id="auth_form10">
                    <div class="form-group has-feedback" name="auth_code10" id="auth_code10">
                        <input class="form-control" id="auth_code_input10" autocomplete="new-password" name="auth_code_input10" type="password" required>
                        <span class="form-control-feedback glyphicon" id="iconBad10"></span>
                    </div>
                </form>
                <hr>

                <div id="modal-loader" style="display: none; text-align: center;">
                    <!-- AJAX loader -->
                    <img src="img/ajax-loader.gif">
                </div>

                <div id="dynamic-content-address" class="hidden">
                    <!-- Dyanamic address -->
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

jQuery:

$('.myModalViewAddress').on('hidden.bs.modal', function() {
    $(this).find('auth_form10')[0].reset();
});

JSFiddle

Answer 1

这里有几个问题。您使用的是 .myModalViewAddress 而不是 #myModalViewAddress。您还需要使用以下方法清除该值:

$('#myModalViewAddress').on('hidden.bs.modal', function() {
  $('#auth_form10 input').val('');
});

<强> jsFiddle example