如何触发bootstrap toast？其他则为按钮 type="button"，或 fetch()

Question

是否有一个简单的其他解决方案来触发我的 boostrap toast ？
也许像：

button onclick ="trigger my bootstrap toast the easy way"

无需获取或按钮 type="button"。
我想我已经找到了一种简单的方法来实现它。

我的站点代码如下所示：

<form> 

<button=type"submit" name="need the name for my json key" value="need you also for my json"

到我的 PHP 后台应用程序，将我的值保存到文件中的 json 字符串。
有没有更简单的方法来实现调用触发bootstrap toast？
PHP 后台方面不是问题，我只是想将我的值发布到我的 PHP。

Answer 1

听起来您想使用 JavaScript 异步提交表单数据，然后在异步请求完成时显示一条 toast 消息。

Toast 消息可以通过 JavaScript 触发，根据 bootstrap 文档 - 没有直接依赖或要求使用按钮。

此代码将监听表单提交事件，阻止默认的回发行为，然后通过

fetch()

发送异步 POST 请求，将表单数据提交到服务器，最后在 POST 请求完成时显示 toast 消息：

HTML：

<form id="frm1">
  Enter your data: <input type="text" name="field1" />
  <button type="submit" class="btn btn-primary" id="liveToastBtn">Submit form</button>
</form>

<div class="toast-container position-fixed bottom-0 end-0 p-3">
  <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
    <div class="toast-header">
      <img src="..." class="rounded me-2" alt="...">
      <strong class="me-auto">Bootstrap</strong>
      <small>Test</small>
      <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
    </div>
    <div class="toast-body">
      Form submitted
    </div>
  </div>
</div>

JavaScript：

document.addEventListener("DOMContentLoaded", function() {
  const frm = document.getElementById("frm1");
  const toastLiveExample = document.getElementById("liveToast");

  const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample);
  frm.addEventListener("submit", function(event) {
    event.preventDefault();

    fetch(
      "https://www.example.com/submit.php", 
      {
        method: "POST",
        body: new FormData(frm)
      }
    )
    .then(function(response) {
      return response.text();
    })
    .then(function(data) {
      toastBootstrap.show();
    })
    .catch(function(err) {
      console.log(`Error: ${err}`);
    });
  });
});

现场演示（带有用于异步请求的假接收器）：https://jsfiddle.net/utazbhp2/3/