我如何在提交表单之前显示 sweetalert 消息？

Question

我在使用 sweetalert 时遇到问题，我希望它在 sweetalert 中弹出一条消息，告诉用户车辆已插入，当他点击 "Ok" 按钮时，它应该进行提交的形式。我有这段代码，但它对我不起作用，有人可以帮忙吗？

<script>
    $(document).ready(function () {
        $("form").submit(function (event) {
            e.preventDefault();
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }, function () {
                $(this).trigger('sumbit');
            });
        });
    });
</script>

表单正在处理，但未显示 sweetalert 消息。

Edit1：它现在显示 sweetalert，但提交没有进行。此代码有效，但它带有 JS 警报 -

$("form").submit(function(){
  alert("Submitted");
});

Answer 1

我立即注意到的几件事：

您正在传递 event，但试图调用 e.preventDafault()。
$(this).trigger('sumbit'); 打字错误。

在下面的代码片段中更新了这些问题。

$(document).ready(function () {
    var shownPopup = false;
    $("form").submit(function (event) {
        if (shownPopup === false) {
            event.preventDefault();
            shownPopup = true;
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }, function () {
                form.trigger('submit');
            });
        }
    });
});

这是一个使用承诺的解决方案，如 https://sweetalert2.github.io/ 文档中所见：

$(document).ready(function () {
    var shownPopup = false;
    $("form").submit(function (event) {
        if (shownPopup === false) {
            event.preventDefault();
            shownPopup = true;
            var form = $(this);
            Swal.fire({
                icon: 'success',
                title: 'Registado',
                text: 'O seu veiculo foi registado!'
            }).then(function() {
                form.trigger('submit');
            });
        }
    });
});

Answer 2

您的 preventDefault 似乎不起作用，因为您有 e.preventDefault();而不是 event.preventDefault(); 知道你的函数接受 "event" 而不是 "e" 作为参数。

我如何在提交表单之前显示 sweetalert 消息？

How can i show a sweetalert message before form submit?

javascript

jquery

sweetalert