提交前的 Sweet Alert 2 确认

Question

我正在尝试在提交表单之前弹出确认信息。但它不起作用。我正在使用甜蜜警报 2。

document.querySelector('#order').addEventListener('submit', function(e) {
        var form = $(this).parents('form');
        e.preventDefault();
        swal({
            title: "Are you sure?",
            text: "Once a invoice is created, you will not be able to delete without the help of support",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
        }).then(function() {
            swal({
                title: 'Success!', 
                text: 'Invoice created! Go to the invoice tab to pay it.', 
                type: 'success'
            }, function() {
                form.submit();
            });
        },function(dismiss) {
            if(dismiss == 'cancel') {
                swal("Cancelled", "Invoice not created!", "error");
            }
        });
    });

这是我的 Javascript 代码，我的 PHP 代码看起来像这样

 <?php
if(isset($_POST['k'])
{
header('Location: https://google.com');
}
?>

我的 HTML 代码是

<form method="POST">
<button type="submit" name="k"></button
</form>

为什么不工作？

---

更新

$("#order").on('submit', function(e) {
        var form = $(this);
        e.preventDefault();
        swal({
            title: "Are you sure?",
            text: "Once a invoice is created, you will not be able to delete without the help of support",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'Yes, I am sure!',
            cancelButtonText: "No, cancel it!",
        }).then(function() {
            swal({
                title: 'Success!', 
                text: 'Invoice created! Go to the invoice tab to pay it.', 
                type: 'success'
            }, function() {
                $(this).trigger('submit');
            });
        },function(dismiss) {
            if(dismiss == 'cancel') {
                swal("Cancelled", "Invoice not created!", "error");
            }
        });
    });

另外我忘了补充一点，我解析了该代码，在我的实际代码中是表单上的 ID

不工作是指没有发布数据。如果它工作正常，它应该根据 PHP 代码重定向到 google.com

Answer 1

我不是编码员，但我发现将提交放在 .then(function() { 对我来说是一个可行的解决方案。我使用的代码是 lp.jQuery("div.main-form form").submit( ); 但您的表单名称会有所不同。我希望它在某些方面有所帮助。

$("#order").on('submit', function(e) {
    var form = $(this);
    e.preventDefault();
    swal({
        title: "Are you sure?",
        text: "Once a invoice is created, you will not be able to delete without the help of support",
        type: "warning",
        showCancelButton: true,
        confirmButtonColor: '#DD6B55',
        confirmButtonText: 'Yes, I am sure!',
        cancelButtonText: "No, cancel it!",
    }).then(function() {
      $(this).trigger('submit');
        swal({
            title: 'Success!', 
            text: 'Invoice created! Go to the invoice tab to pay it.', 
            type: 'success'
        }, function() {
            $(this).trigger('submit');
        });
    },function(dismiss) {
        if(dismiss == 'cancel') {
            swal("Cancelled", "Invoice not created!", "error");
        }
    });
});

Answer 2

首先，此 HTML 中没有选择器 #order。

其次，你会想要阻止表单元素的默认行为，所以这样做：

$("form").on('submit', function(e) {
    var form = $(this);
    e.preventDefault();
    //[...]

然后，你想最终提交的地方，你可以把这个：

$(this).trigger('submit');