提交表单后如何在屏幕上保持模式/吐司？答案

【问题标题】：How to keep a modal/toast on screen after form submission?提交表单后如何在屏幕上保持模式/吐司？
【发布时间】：2015-11-18 20:27:24
【问题描述】：

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

【问题讨论】：

标签： javascript html forms toast

【解决方案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();
          }
   });
});

【讨论】：

你能帮我把它说得更清楚吗？ @尼克
@VikramBajaj 我添加了一个代码示例，希望对您有所帮助。我们在工作中使用类似的东西，因为我们几乎所有的表单都是通过 ajax 提交的。
谢谢@Nick 我希望有一个更简单的解决方案，因为我已经使用 php 将表单详细信息发送到我的电子邮件，并且我正在使用 JavaScript 来决定显示哪个 toast。如果我使用 preventDefault()，它可能会干扰发送到我的电子邮件的表单，不是吗？
是和不是。它仍然会进行调用，只是不会刷新页面。您需要将执行发送的 PHP 代码移动到一个单独的文件中（我相信，自从我使用 PHP 以来已经有几年了）。当然，这需要更多的开发工作，但是如果不进行完整的页面重新加载，我想不出更好的方法。 preventDefault() 只是防止事件冒泡并在其他任何地方处理（因为您正在对事件进行自定义处理）。例如，使用此方法的按钮且不使用 preventDefault 将意味着表单将被提交两次。