如何使用退出表格的Sweet alert 2？

Question

i have this codes to logout. And this works with standard confirmation box, but not with Sweet alert 2. Can any one tell me wy? Thank you. The first code is the form in a page named dropzone.php the sweet alert code is also in this file. Then i have a separat file named logout.php.

    <form name="logoutform" method="post" action="logout.php" id="logoutform">
    <input type="hidden" name="form_name" value="logoutform">
    <button class="logoutform_button" type="submit" name="logout" value="Logga ut" id="logout"/></button>
</form>


//This works:
<script>
$(function(){
    $('#logout').click(function(){
        if(confirm('Are you sure to logout')) {
        return true;
        }

        return false;
        });
    });
</script>

//This do not work:
<script>
    $("#logout").on("click", function() {
        swal({
        title: 'Logga ut?',
        type: 'warning',
        showCancelButton: true,
        confirmButtonColor: '#3085d6',
        cancelButtonColor: '#d33',
        confirmButtonText: 'OK'
    })  
    })  
</script>


//This is the code i have in the logout.php file:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST' && $_POST['form_name'] == 'logoutform')
{
if (session_id() == "")
{
    session_start();
}

unset($_SESSION['password']);
header('Location: dropzone.php');
exit;
}  
?>

Answer 1

I suppose this goes ahead to submit the logout for without popping the sweetalert. To get you desired result, change the login button type to "button" from "submit". Pass a callback to check the clicked button, if confirm were click. go ahead to submit the form

<button class="logoutform_button" type="button" name="logout" value="Logga ut" id="logout"/></button>
<script>
$("#logout").on("click", function() {
    swal({
    title: 'Logga ut?',
    type: 'warning',
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'OK',
    closeOnConfirm: true,
    closeOnCancel: true
   }).then((result) => { 
      if (result.value===true) { 
         $('#logoutform').submit() // this submits the form 
      } 
   }) 
})