Question

我正在尝试在提交表单之前弹出确认信息。但它不起作用。我正在使用Sweet Alert 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

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

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

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

然后，在你想要最终提交的地方，你可以把它放在：

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

Answer 2

我不是编码器，但我发现将提交放在.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");
        }
    });
});

提交前的Sweet Alert 2确认

更新

2 个答案: