Bootstrap模态框内提交按钮无法触发表单的问题排查

我创建了一个Bootstrap模态框，其中包含两个submit类型的按钮，本应触发包裹它们的表单，但实际并未生效，无法找到原因。尝试将表单包裹包括模态框div在内的更多元素，但仍然无效。只希望这些按钮能提交表单，以便在PHP代码块中捕获提交的数据。

原始代码 #

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
if (isset($_POST["action"]) && $_POST["action"] == "accept") {
    echo "Acccepted";
} elseif (isset($_POST["action"]) && $_POST["action"] == "reject") {
    "Accepted";
}
}
?>

<<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<a data-bs-toggle="modal" data-bs-target="#guest">
    <p>>Friend request from <b>guest</b></p>
        <div class="modal" tabindex="-1" id="guest">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">Request from <b>guest</b></h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <p>Accept request?</p>
                    </div>
                    <div class="modal-footer">
                        <form action="test.php" method="post">
                            <button class="btn btn-primary" type="submit" name="action" value="accept" data-bs-dismiss="modal">Accept</button>
                            <button class="btn btn-secondary" type="submit" name="action" value="reject" data-bs-dismiss="modal">Reject</button>
                            <input type="hidden" name="Username" value="guest">
                        </form>
                    </div>
                </div>
            </div>
        </div>
</a>


<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

问题原因及修复方案 #

1. 模态框嵌套在<a>标签内违反HTML规范 #

HTML中<a>属于行内元素，不能包含<div>这类块级元素，浏览器解析时会自动修正结构，导致表单提交行为被干扰。

修复：将模态框从<a>标签中移出，单独放置在页面中。

2. data-bs-dismiss="modal"中断表单提交 #

Bootstrap的data-bs-dismiss会立即触发模态框关闭，可能在表单提交完成前就终止了提交流程。

修复：移除按钮上的data-bs-dismiss属性，通过JavaScript监听表单提交事件，提交完成后再关闭模态框。

3. PHP代码逻辑错误 #

拒绝分支的代码"Accepted";没有输出语句，无法正常反馈结果。

修复：修改为echo "Rejected";。

修正后的完整代码 #

<?php
if ($_SERVER["REQUEST_METHOD"] == "POST") {
    if (isset($_POST["action"]) && $_POST["action"] == "accept") {
        echo "Accepted";
    } elseif (isset($_POST["action"]) && $_POST["action"] == "reject") {
        echo "Rejected";
    }
}
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
</head>
<body>
<!-- 触发按钮单独放置 -->
<a data-bs-toggle="modal" data-bs-target="#guest">
    <p>>Friend request from <b>guest</b></p>
</a>

<!-- 模态框移至a标签外部 -->
<div class="modal" tabindex="-1" id="guest">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Request from <b>guest</b></h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Accept request?</p>
            </div>
            <div class="modal-footer">
                <form action="test.php" method="post" id="requestForm">
                    <button class="btn btn-primary" type="submit" name="action" value="accept">Accept</button>
                    <button class="btn btn-secondary" type="submit" name="action" value="reject">Reject</button>
                    <input type="hidden" name="Username" value="guest">
                </form>
            </div>
        </div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<script>
// 监听表单提交，提交后关闭模态框
document.getElementById('requestForm').addEventListener('submit', function() {
    const modalInstance = bootstrap.Modal.getInstance(document.getElementById('guest'));
    modalInstance.hide();
});
</script>
</body>
</html>

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