CODEWITHSUNDEEP
javascriptphp
Luka Kerr
Luka Kerr

Reputation: 4239

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 protected]";
    $from    =  "[email protected]";
    $name    =  $_POST['name'];
    $email   =  $_POST['email'];

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

    $headers =  'From: [email protected]' . "\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>";
    }

}

Upvotes: 0

Views: 651

Answers (2)

technico
technico

Reputation: 1172

Consider your php file is generating a classic HTML page. It's a good habit to first write the desired HTML file (and test it), then make PHP generating it after.

Here's how the generated HTML should look like (for the script part !).

<script src="alert.min.js"></script>
<script>function swal(arg1,arg2){alert(arg1+arg2);}

swal('Thanks!', 'We\'ll get back to you shortly.');
document.location.href='google.com';</script>

now, to generate this HTML code from php, let's modify the last part of your program :

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

    }

HTML test page : 

<script src="alert.min.js"></script>
<script>function swal(arg1,arg2){alert(arg1+arg2);}</script>
<button type="button" onclick="swal('Thanks!', 'We\'ll get back to you shortly.')">swal Test</button>

Upvotes: 0

Zayn Ali
Zayn Ali

Reputation: 4915

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>";
}

Upvotes: 1

Related Questions