点击Reset按钮仅重置表单，避免关闭Bootstrap Modal的问题求助

问题：点击模态框内的Reset按钮时，仅希望重置表单内容，但当前代码点击后会直接关闭模态框。

问题根源 #

你的Reset按钮上添加了data-bs-dismiss="modal"属性——这是Bootstrap内置的用于触发模态框关闭的属性，它的执行优先级高于你写的onclick逻辑，所以即使添加了return false也无法阻止模态框关闭。

修复方案 #

直接移除按钮上的data-bs-dismiss="modal"属性，仅保留表单重置逻辑即可：

<!doctype html>
<html lang="en">

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>

<body>
    <div class="modal fade" id="messagemodal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="btn-close" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                    <form action="/action_page.php">
                        <label for="fname">First name:</label><br>
                        <input type="text" id="fname" name="fname" value="John"><br>
                        <label for="lname">Last name:</label><br>
                        <input type="text" id="lname" name="lname" value="Doe"><br>
                    </form>
                </div>
                <div class="modal-footer">
                    <!-- 移除触发模态框关闭的属性，仅保留表单重置逻辑 -->
                    <button type="button" class="btn btn-secondary" onclick="$('form').trigger('reset');">Reset</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                </div>
            </div>
        </div>
    </div>
    <script>
        var modal = new bootstrap.Modal(document.getElementById('messagemodal'), {
            keyboard: false
        });
        modal.show();
    </script>
</body>
</html>

可选优化 #

如果想避免内联onclick代码，也可以用jQuery绑定事件，代码结构更清晰：

$(document).ready(function(){
    $('.btn-secondary').click(function(e){
        e.preventDefault();
        $('form').trigger('reset');
    });
});

添加这段代码后，移除按钮上的onclick属性即可。

内容的提问来源于stack exchange，提问作者Code Guy