sweetalert not working in php after form submission

Question

i have a simple php form, on form submit i want to display sweet alert, i did the following code:

 <script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script> <?php if(isset($_POST['submit'])){ .... ... ..... mail($to,$subject,$message,$headers); echo "<script type='text/javascript'>"; echo "swal({ title: 'Your Message Was Sent Successfully', type: 'success', confirmButtonColor: '#DD6B55', confirmButtonText: 'CLOSE', }).then(() => { if (result.value) { // handle Confirm button click } else { // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer' } });"; echo "</script>"; } ?>

howerver sweetalert doesnt show up after formsubmit, can anyone please tell me what is wrong in here, thanks in advance

Answer 1

Because your body is empty and sweetalert append your code to empty body & you got error in your console like this:

If you want to send alert with this method, you should have something in your body.

For example I echo simple span on my code and it's work for me:

<script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script>

<?php
if(isset($_POST['submit'])){
    mail($to,$subject,$message,$headers);
    // Simple span
    echo '<span></span>';

  
 echo "<script type='text/javascript'>";
 echo "swal({
    title: 'Your Message Was Sent Successfully',
    type: 'success',

    confirmButtonColor: '#DD6B55',
    confirmButtonText: 'CLOSE',
  }).then(() => {
    if (result.value) {
      // handle Confirm button click
    } else {
      // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
    }
  });";
 echo "</script>";


        }
?>

Or you can use AJAX if you use jQuery Instead of alert like this:

<script src="https://unpkg.com/sweetalert2@7.8.2/dist/sweetalert2.all.js"></script>
<script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script>

<?php
if(isset($_POST['submit'])){
    mail($to,$subject,$message,$headers);
}
?>

<script>
    $("YOUR FORM NAME OR ID").on('submit', (e) => {
        // prevent default for not realoding after sent
        e.preventDefault();

        $.ajax({
            url: "YOUR URL FOR SUBMIT FORM",
            type: "POST"
        }).done(() => {
            // Our request submited
            swal({
            title: 'Your Message Was Sent Successfully',
            type: 'success',
            confirmButtonColor: '#DD6B55',
            confirmButtonText: 'CLOSE',
            }).then(() => {
            if (result.value) {
                // handle Confirm button click
            } else {
                // result.dismiss can be 'cancel', 'overlay', 'esc' or 'timer'
            }
            });
        })
    })
</script>