jQueryでBootstrapのモーダルを閉じた時にフォームをリセットする方法

68 回閲覧されました

公開日 : 2024年10月16日
最終更新日 : 2024年9月19日

みなさんこんにちは、jonioです。

今回はモーダルを閉じた時にモーダルの中にあるフォームをリセットする方法を解説します。

一部CakePHPが入りますがその部分は無視してください。

1 HTML
2 jQuery

HTML

コードを下記にします。

<div class="modal fade" id="checkInModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <?= $this->Form->create(null, ['url' => ['action' => 'record']]) ?>
                <div class="modal-body">
                    <?= $this->Form->control('password', [
                        'type' => 'password',
                        'label' => 'パスワード',
                        'required' => true,
                    ])?>
                </div>
                <div class="modal-footer">
                    <?= $this->Form->button('送信', ['class' => 'btn btn-primary', 'id' => 'confirm-check-in']) ?>
                </div>
            <?= $this->Form->end() ?>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">戻る</button>
        </div>
    </div>
</div>

9行目〜20行目がフォームに該当します。

jQuery

コードを下記にします。

$('#checkInModal').on('hidden.bs.modal', function() {
    $(this).find('form').trigger('reset');
});

「.on(‘hidden.bs.modal’」でBootstrapで作るモーダルを閉じた時という意味になります。

その時に2行を記述することでモーダルの中のformをリセットします。

「$(this)」は「id=”checkInModal”」つまりモーダル全体という意味で「.find(‘form’)」はモーダルの中のformを探すという意味で「.trigger(‘reset’)」はフォームの中の値を強制的にリセットするという意味です。

これで完成です。