Sweet alert 2 在表单提交前显示

Question

I have a code for a register account. What I want to happen is that the success alert displays before the forms submit and the page reloads or the success alert pops up after the form is successfully submitted.

I tried this code and I it just submits the form and reload the page but the alert does not appear.

`

 if ($password == $cpassword) {
   $query1 = mysqli_query($connections, $query);
     if ($query1){
      echo "
           <script type='text/javascript'>setTimeout(function () { 
                Swal.fire({
                  title: 'Success!',
                  icon: 'success',
                  text: 'Account registered!',
                  allowOutsideClick: true,
                  allowEscapeKey: true,
                  allowEnterKey: false,
                  showConfirmButton: false,
                  }); 
                },100) </script>";
              }
              
        echo "<script>window.location.href='accounts.php'</script>";
  }

`

I also tried another code, the alert works but the form is submitting twice

if ($password == $cpassword) {
              mysqli_query($connections, $query);
              echo "
              <script type='text/javascript'>setTimeout(function () { 
                Swal.fire({
                  title: 'Success!',
                  icon: 'success',
                  text: 'Account registered!',
                  allowOutsideClick: true,
                  allowEscapeKey: true,
                  allowEnterKey: false,
                  showConfirmButton: false,
                  }); 
                  },100)

                  window.setTimeout(function(){ 
                    if(!window.location.hash) {
        window.location = window.location + '#loaded';
        window.location.reload();
    }
                    } ,100);
                    </script>";
                  }

Answer 1

You are missing the function right after firing the sweet alert information. You can use in the following way:

$(document).on('click', '.delete_trigger_btn', function () {
  let redirect_url = $(this).attr('data-href');
    Swal.fire({
        title: 'Success!',
        icon: 'success',
        text: 'Account registered!',
        allowOutsideClick: true,
        allowEscapeKey: true,
        allowEnterKey: false,
        showConfirmButton: false,
    }).then(function (t) {
        if (t.value == true) {
            window.location.href = redirect_url;
        }
    });
});

You can pass the URL directly or keep in the input field by setting a hidden attribute.

I hope this helps and this is what you are looking for.