Luka Kerr Luka Kerr - 4 months ago 15
Javascript Question

Custom JS file in PHP for alert

I have a html form that on submission an alert box pops up. This is done through php and javascript. Right now the alert is just the standard alert, but I wanted to make the alert styled. I have a custom css and custom javascript file (

alert.css
and
alert.min.js
) which gives me different styled alert boxes.
Also,
swal
is the word that replaces the javascript
alert


The problem I have is that, in my simple php script I cannot seem to reference these files to make the custom alert box pop up

How can i correctly reference the custom
alert.min.js
file?

This is the (very simple) PHP:

<?php
if(isset($_POST['submit'])){
$to = "email@email.com";
$from = "email@whatever.com";
$name = $_POST['name'];
$email = $_POST['email'];

$subject = "Contact Form Submission";
$message = "Name - " . $name . "\n" . "Message - " . $_POST['message'];
$headers = "From:" . $from;

$headers = 'From: email@whatever.com' . "\r\n" .
'Reply-To: ' . $email . "\r\n" .
'X-Mailer: PHP/' . phpversion();

$URL="http://www.google.com/";

if (!filter_var($from, FILTER_VALIDATE_EMAIL)) {
echo "Please enter a valid email";
} else {
mail($to,$subject,$message,$headers);
echo " <script src="alert.min.js">swal('Thanks!', 'We'll get back to you shortly.');</script>";
echo '<META HTTP-EQUIV="refresh" content="0;URL=' . $URL . '">';
echo "<script type='text/javascript'>document.location.href='{$URL}';</script>";
}

}
?>

Answer

Actually you are using SweetAlert.

So, you've to update your response in html because you've to include sweetalert css too in order to work correctly and css goes to the head section.

Update your else section like so

else {
    mail($to, $subject, $message, $headers);
    echo "
        <html>
            <head>
                <title>Document</title>
                <link rel='stylesheet' href='sweetalert.css'>
            </head>
            <body>
                <script src='sweetalert.min.js'></script>
                <script>sweetAlert('Thanks!', \"We'll get back to you shortly.\");</script>
                <script>document.location.href = '{$URL}';</script>
            </body>
        </html>";
}