Sweet Alert 2确认后再提交

Question

I'm trying to make a confirmation pop up before submitting the form. But it's not working. I'm using 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");
            }
        });
    });

That's my Javascript code and my PHP code looks something like this

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

My HTML code is

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

It's not working why?

---

Update

$("#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");
            }
        });
    });

Also I forgot to add that I parsed that code and on my actual code there is the ID on the form

By not working I mean the data isn't being posted. If it was working properly, it should be redirecting to google.com per the PHP code

Answer 1

First, you don't have the selector #order in this HTML.

Second, you'll want to prevent the default behavior of the form element, so do this:

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

Then, where you want to finally submit, you can put this:

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

Answer 2

I am no coder but I found that placing the submit under .then(function() { was a working solution for me. The code I used is lp.jQuery("div.main-form form").submit(); but your form name will be different. I hope it helps in some way.

$("#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");
        }
    });
});