当表单通过 ajax 提交成功后，bootstrap 模态框（如 #modalsuccess）无法弹出，通常是因为表单默认提交行为触发了页面刷新，导致 javascript 执行中断或 dom 状态丢失。

当表单通过 ajax 提交成功后，bootstrap 模态框（如 #modalsuccess）无法弹出，通常是因为表单默认提交行为触发了页面刷新，导致 javascript 执行中断或 dom 状态丢失。

在您的 tambahnotis.php 页面中，虽然已正确编写 jQuery AJAX 逻辑并调用 $('#modalSuccess').modal('show')，但关键问题隐藏在 HTML 表单按钮的 type 属性上：

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

该按钮位于

标签内，且 type="submit" 会触发表单原生提交——即使您绑定了点击事件并执行了 AJAX，若未显式阻止默认行为，浏览器仍会在 AJAX 发送后立即提交表单、刷新页面，导致模态框来不及渲染即被中断。

✅ 正确做法是：
将按钮类型改为 type="button"，并确保在事件处理中阻止表单默认提交。

VPS Bootstrap

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

下载

✅ 修改步骤

1. 更新按钮 HTML（关键修复）

<!-- 替换原 submit 按钮 -->
<button class="btn btn-primary" id="btnTambahNotis" type="button" name="submit">Tambah Notis</button>

⚠️ 注意：type="button" 不会触发表单提交，完全由 JavaScript 控制流程。

2. 同时优化 JavaScript 事件绑定（增强健壮性）

建议将事件从 click 改为监听表单 submit 事件，并显式调用 event.preventDefault() —— 这样即使未来误改回 type="submit"，也能确保不刷新：

<script>
$(document).ready(function() {
    // 监听整个表单的 submit 事件（更语义化、更可靠）
    $('form.card').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 ($.trim(response) === "success") {
                    $('#modalSuccess').modal('show');
                    // 可选：清空表单 & 重置验证提示
                    $('form.card')[0].reset();
                } else {
                    $('#modalError').modal('show');
                }
            },
            error: function(xhr, status, error) {
                console.error("AJAX Error:", status, error);
                $('#modalError').modal('show');
            }
        });
    });
});
</script>

? 补充注意事项

• Bootstrap 5+ 依赖 Popper.js 和 Bootstrap JS：确保页面已正确引入 bootstrap.bundle.min.js（含 Popper），否则 .modal('show') 将静默失败。您当前使用的是 Tabler 框架（基于 Bootstrap），请确认 ./dist/js/tabler.min.js 内部已集成 Modal 功能，或额外加载：

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>

• 模态框 HTML 必须在 DOM 加载完成后存在：您的模态框代码位于