解决 Bootstrap 警告框提交后仅显示一次的问题-html教程-PHP中文网

解决 bootstrap 警告框提交后仅显示一次的问题

本文旨在解决使用 Bootstrap 5 警告框作为表单提交成功提示时，仅能显示一次的问题。核心原因在于 Bootstrap 默认的 data-bs-dismiss="alert" 属性会彻底移除警告框元素。解决方案是移除该属性，并结合 JavaScript 手动控制警告框的显示与隐藏，通过添加或移除 d-none 类来实现元素的持久化管理，确保每次提交后都能正确显示提示。

问题背景与分析

在网页开发中，我们经常需要在用户提交表单后显示一个反馈消息，例如“消息已发送成功”。Bootstrap 提供的警告框（Alert）组件是实现这一功能的常用选择。然而，许多开发者会遇到一个常见问题：当用户点击警告框的关闭按钮后，该警告框就再也无法通过 JavaScript 显示出来，除非刷新页面。

最初的实现通常包括以下 HTML 结构和 JavaScript 逻辑：

初始 HTML 结构：

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
  <strong>Thank you!</strong> We have received your message.
  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>

登录后复制

初始 JavaScript 逻辑（简化）：

const myAlert = document.querySelector('.alert');
// ... 其他DOM元素和表单提交逻辑

form.addEventListener('submit', e => {
  e.preventDefault();
  // ... 发送数据逻辑
  fetch(scriptURL, { method: 'POST', body: new FormData(form) })
    .then(response => {
      myAlert.classList.toggle('d-none'); // 期望显示警告框
      form.reset();
      console.log('Success!', response);
    })
    .catch(error => console.error('Error!', error.message));
});

登录后复制

在这种设置下，第一次表单提交成功后，myAlert.classList.toggle('d-none') 会移除 d-none 类，使警告框显示。然而，一旦用户点击了警告框右上角的关闭按钮，警告框就会永久消失。

问题根源：

问题的核心在于 Bootstrap 警告框的 data-bs-dismiss="alert" 属性。根据 Bootstrap 的官方文档说明，当一个带有 data-bs-dismiss="alert" 属性的关闭按钮被点击时，它不仅会隐藏警告框，还会将警告框元素从 DOM 结构中完全移除。这意味着，即使你尝试再次通过 JavaScript 操作该元素（例如 myAlert.classList.toggle('d-none')），由于元素已不存在于 DOM 中，操作自然会失效。

解决方案

为了解决警告框被移除的问题，我们需要改变其关闭行为，使其在关闭时仅隐藏而非移除。这需要对 HTML 和 JavaScript 代码进行相应调整。

1. 修改 HTML 结构

首先，从关闭按钮中移除 data-bs-dismiss="alert" 属性。取而代之的是，我们将添加一个自定义的 onclick 事件处理器，用于在用户点击关闭按钮时执行我们自己的 JavaScript 函数来隐藏警告框。

更新后的 HTML 结构：

AI建筑知识问答

用人工智能ChatGPT帮你解答所有建筑问题

查看详情

<div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
  <strong>Thank you!</strong> We have received your message.
  <button type="button" class="btn-close" onclick="hideCustomAlert()" aria-label="Close"></button>
</div>

登录后复制

这里我们将 data-bs-dismiss="alert" 替换为 onclick="hideCustomAlert()"。hideCustomAlert() 将是我们自定义的 JavaScript 函数，负责隐藏警告框。

2. 修改 JavaScript 逻辑

接下来，我们需要调整 JavaScript 代码，包括：

确保在表单提交成功时，明确地“显示”警告框（移除 d-none 类）。
创建 hideCustomAlert() 函数，用于在用户点击关闭按钮时“隐藏”警告框（添加 d-none 类）。

更新后的 JavaScript 逻辑：

const scriptURL = 'https://script.google.com/macros/......'; // 替换为你的实际URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.alert');
const btnKirim = document.querySelector('.my-btn'); // 假设是提交按钮
const btnLoading = document.querySelector('.btn-loading'); // 假设是加载状态按钮

// 表单提交事件监听器
form.addEventListener('submit', e => {
  e.preventDefault(); // 阻止表单默认提交行为

  // 切换按钮状态（显示加载中，隐藏提交按钮）
  btnLoading.classList.toggle('d-none');
  btnKirim.classList.toggle('d-none');

  // 发送表单数据
  fetch(scriptURL, { method: 'POST', body: new FormData(form) })
    .then(response => {
      // 恢复按钮状态
      btnLoading.classList.toggle('d-none');
      btnKirim.classList.toggle('d-none');

      // 明确移除 'd-none' 类来显示警告框
      myAlert.classList.remove('d-none'); 

      form.reset(); // 重置表单
      console.log('Success!', response);
    })
    .catch(error => console.error('Error!', error.message));
});

// 自定义函数：当用户点击警告框的关闭按钮时调用，用于隐藏警告框
function hideCustomAlert() {
  myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏警告框
}

登录后复制

关键改动点：

在 fetch 请求成功的回调中，使用 myAlert.classList.remove('d-none') 明确地移除 d-none 类，确保警告框被显示。
新增 hideCustomAlert() 函数，其作用是当用户点击关闭按钮时，通过 myAlert.classList.add('d-none') 将 d-none 类添加回去，从而隐藏警告框。这样，警告框元素始终保留在 DOM 中，下次提交时仍可被操作。

完整代码示例

将上述 HTML 和 JavaScript 结合，一个完整的解决方案示例如下：

HTML (例如 index.html)：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单提交与自定义警告框</title>
    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        body {
            padding: 20px;
        }
        .form-container {
            max-width: 500px;
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #eee;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="form-container">
        <h2>联系我们</h2>
        <!-- 警告框：初始隐藏，通过JS控制显示 -->
        <div class="alert my-alert alert-warning alert-dismissible fade show d-none" role="alert">
            <strong>感谢！</strong> 您的消息已收到。
            <!-- 移除 data-bs-dismiss，添加自定义 onclick -->
            <button type="button" class="btn-close" onclick="hideCustomAlert()" aria-label="Close"></button>
        </div>

        <form name="portofolio-contact-form" class="mt-3">
            <div class="mb-3">
                <label for="name" class="form-label">姓名</label>
                <input type="text" class="form-control" id="name" name="name" required>
            </div>
            <div class="mb-3">
                <label for="email" class="form-label">邮箱</label>
                <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="mb-3">
                <label for="message" class="form-label">消息</label>
                <textarea class="form-control" id="message" name="message" rows="4" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary my-btn">发送</button>
            <button class="btn btn-primary btn-loading d-none" type="button" disabled>
                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                加载中...
            </button>
        </form>
    </div>

    <!-- 引入 Bootstrap JS (如果需要其他组件功能) -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入你的自定义 JavaScript -->
    <script src="script.js"></script>
</body>
</html>

登录后复制

JavaScript (例如 script.js)：

const scriptURL = 'https://script.google.com/macros/s/AKfycbzAovQklbPcjlV0Z0MAgTrvDR--cWl3mhWyfwcOneOcSbRPBnk_cSTCP2LOcUCiG5/exec'; // 替换为你的实际 Google Apps Script URL
const form = document.forms['portofolio-contact-form'];
const myAlert = document.querySelector('.my-alert'); // 使用更具体的类名选择
const btnKirim = document.querySelector('.my-btn');
const btnLoading = document.querySelector('.btn-loading');

form.addEventListener('submit', e => {
    e.preventDefault(); // 阻止表单默认提交

    // 切换按钮显示状态：隐藏提交按钮，显示加载按钮
    btnLoading.classList.remove('d-none');
    btnKirim.classList.add('d-none');

    // 发送数据到 Google Apps Script
    fetch(scriptURL, { method: 'POST', body: new FormData(form) })
        .then(response => {
            // 恢复按钮显示状态：隐藏加载按钮，显示提交按钮
            btnLoading.classList.add('d-none');
            btnKirim.classList.remove('d-none');

            // 显示警告框：移除 'd-none' 类
            myAlert.classList.remove('d-none');

            form.reset(); // 重置表单内容
            console.log('Success!', response);
        })
        .catch(error => {
            console.error('Error!', error.message);
            // 错误时也恢复按钮状态，并可显示错误警告
            btnLoading.classList.add('d-none');
            btnKirim.classList.remove('d-none');
            // 可以在此处显示一个错误提示警告框
        });
});

// 自定义函数：隐藏警告框
function hideCustomAlert() {
    myAlert.classList.add('d-none'); // 添加 'd-none' 类来隐藏警告框
}

登录后复制

注意事项与总结

理解 Bootstrap 行为： 深入理解 Bootstrap 组件的 data-* 属性行为至关重要。data-bs-dismiss="alert" 的设计初衷是让警告框在被关闭后不再干扰页面布局，因此它选择移除元素。
自定义控制： 当你需要更精细地控制组件的生命周期（例如，仅隐藏而非移除），通常需要移除 Bootstrap 的默认 data-* 属性，并使用 JavaScript 进行自定义控制。
类名管理： 使用 classList.add(), classList.remove(), classList.toggle() 是管理元素显示状态的推荐方式，因为它直接操作 CSS 类，效率高且易于维护。
可访问性： 虽然本解决方案解决了功能问题，但在实际应用中，还应考虑可访问性。当警告框显示或隐藏时，确保屏幕阅读器用户能感知到这些变化。例如，可以在警告框显示时，将焦点转移到警告框内部，并在其隐藏时将焦点移回表单。

通过以上修改，我们成功地将 Bootstrap 警告框从“一次性”提示变为“可重复使用”的反馈机制，确保了用户每次提交表单后都能收到清晰的成功提示，并能自由地关闭它，而不会影响后续的交互。

以上就是解决 Bootstrap 警告框提交后仅显示一次的问题的详细内容，更多请关注php中文网其它相关文章！