本文详解 bootstrap modal 在 ajax 表单提交后无法弹出的成功提示框问题，核心在于表单默认提交行为干扰了 javascript 控制流，通过将按钮类型由 submit 改为 button 即可彻底解决。

本文详解 bootstrap modal 在 ajax 表单提交后无法弹出的成功提示框问题，核心在于表单默认提交行为干扰了 javascript 控制流，通过将按钮类型由 submit 改为 button 即可彻底解决。

在使用 Bootstrap + jQuery 实现表单异步提交（AJAX）时，一个高频陷阱是：模态框（如 #modalSuccess）明明已正确声明、JS 逻辑看似无误，却始终无法显示。从您提供的代码可见，问题根源并非 PHP 后端响应失败，而是前端事件处理存在关键疏漏。

? 问题定位：表单默认提交行为劫持了 AJAX 流程

当前 HTML 中添加通知的按钮定义如下：

<button class="btn btn-primary" id="btnTambahNotis" type="submit" name="submit">Tambah Notis</button>

该按钮位于

标签内，且 type="submit" —— 这意味着：
✅ 点击时会触发表单原生提交（页面跳转或刷新）；
❌ 导致 $("#btnTambahNotis").click(...) 绑定的 AJAX 逻辑可能未执行完即被中断；
❌ 即使 AJAX 成功返回 "success"，页面已刷新/跳转，模态框 DOM 尚未渲染或立即失效。

? 注意：您已在 JS 中使用 $.ajax() 发起请求，但未阻止表单默认行为。type="submit" + 表单容器 = 隐式提交，与 AJAX 的“无刷新”目标根本冲突。

VPS Bootstrap

从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。

下载

✅ 正确解法：禁用原生提交，交由 JS 全权控制

只需将按钮类型改为 type="button"，并确保在点击事件中显式阻止表单默认行为（双重保险）：

<!-- 修改前（错误） -->
<button class="btn btn-primary" id="btnTambahNotis" type="submit" name="submit">Tambah Notis</button>

<!-- 修改后（正确） -->
<button class="btn btn-primary" id="btnTambahNotis" type="button" name="submit">Tambah Notis</button>

同时，优化 JavaScript 事件绑定，推荐使用 表单 submit 事件 + event.preventDefault()（更健壮，兼容回车提交）：

<script>
$(document).ready(function() {
    // 推荐：监听表单 submit 事件（支持按钮点击 & 回车提交）
    $('form').on('submit', function(e) {
        e.preventDefault(); // ✅ 关键：阻止原生表单提交

        var nomborFail = $("#nomborFail").val().trim();
        var ulasan = $("#ulasan").val().trim();
        var tarikhNotisKeluar = $("#tarikhNotisKeluar").val().trim();

        // 前端空值校验
        if (!nomborFail || !ulasan || !tarikhNotisKeluar) {
            $('#modalEmpty').modal('show');
            return;
        }

        // AJAX 提交
        $.ajax({
            type: "POST",
            url: "tambahnotisphp.php",
            data: { 
                nomborFail: nomborFail, 
                ulasan: ulasan, 
                tarikhNotisKeluar: tarikhNotisKeluar 
            },
            dataType: "text", // 显式声明响应类型，避免 jQuery 自动解析异常
            success: function(response) {
                if (response.trim() === "success") {
                    $('#modalSuccess').modal('show');
                } else {
                    $('#modalError').modal('show');
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                $('#modalError').modal('show');
            }
        });
    });
});
</script>

⚠️ 其他关键注意事项

• Bootstrap 5+ 依赖 bootstrap.bundle.min.js：确认页面已加载包含 Popper 的完整版 Bootstrap JS（您当前引用的是 tabler.min.js，需检查其是否内置 Bootstrap Modal 功能；若否，需额外引入）。
• Modal 初始化检查：确保 Bootstrap JS 已正确加载，可通过浏览器控制台执行 $('#modalSuccess').modal 验证方法是否存在。
• PHP 响应纯净性：您的 tambahnotisphp.php 返回纯文本 "success" 或 "error" 是正确的，但务必确保无任何额外输出（如 BOM、空格、echo 调试语句），否则 response.trim() 可能匹配失败。
• jQuery 版本兼容性：您使用 jquery3.7.1.js，与 Bootstrap 5 Modal 方法（.modal('show')）完全兼容。

✅ 总结

问题现象	根本原因	解决方案
#modalSuccess 不弹出，但数据库写入成功	表单 type="submit" 触发页面刷新，中断 AJAX 后续逻辑	将按钮 type 改为 button，并在 JS 中使用 e.preventDefault() 阻止默认提交

遵循以上修改，Modal 将严格按 AJAX 响应结果精准触发，彻底告别“数据存了但提示不显示”的困扰。