表格提交后如何在屏幕上保留模态/吐司？

Question

我有一个联系表格，在提交之后，我想显示错误吐司或成功吐司。 问题是虽然吐司正确显示，但它几乎立即消失，因为当我点击“提交”时页面会重新加载。 如何让烤面包停留更长时间？

Answer 1

您需要序列化表单并通过ajax提交。在订阅中，您需要对传入的事件执行preventDefault（）调用。然后在ajax调用的成功/失败部分中调用toast。

作为一个简单的例子：

<强> HTML

<form>
   ...Form Stuff
   ...Here

   <a class="submitButton">Submit</a>
</form>

<强> JQuery的

$(document).ready(function () {
   $(".submitButton").click(function (e) {
       e.preventDefault();
       var form = $(this).parents("form:first");
       $.ajax({
          type: 'POST',
          url: '/my/url',
          data: form.serialize(),
          success: function (response) {
               openToast();
          }
   });
});