Making a Div an alert box

See more:

Javascript

HTML

PHP

Hey guys, just had a quick question about something, if it was possible.

I have this div:

<div id="signup-response"></div>

which outputs the message of responses depending on what the user enters.


my php side:

$existingSignup = mysql_query("SELECT * FROM newsletter_emails WHERE email='$email'");
            if(mysql_num_rows($existingSignup) < 1){

                $insertSignup = mysql_query("INSERT INTO newsletter_emails (email,category) VALUES ('$email', '9')");
                if($insertSignup){ //if insert is successful
                    $status = "success";
                    $message = "You've successfully subscribed!";

                    $date = date("o/m/d");
                    $insertYo = "INSERT INTO activity ( date, action, icon) VALUES ('$date', 'user has subscribed', 'fa-envelope-o')";
                    mysql_query($insertYo) or die('MySQL Error.');
                }

I want to send an ALERT once the user has successfully subscribed, however i tried this code

echo '<script>alert("this is the response msg.");</script>';

in replace of the

$message = "You've successfully subscribed!";

but it didn't work. My javascript is:

//check the form is not currently submitting
        if($(this).data('formstatus') !== 'submitting'){

            //setup variables
            var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'),
                responseMsg = $('#signup-response');


            //add status data to form
            form.data('formstatus','submitting');

            //send data to server for validation
            $.ajax({
                url: formUrl,
                type: formMethod,
                data: formData,
                success:function(data){

                    //setup variables
                    var responseData = jQuery.parseJSON(data),
                        klass = '';

                    //response conditional
                    switch(responseData.status){
                        case 'error':
                            klass = 'alert alert-error';
                        break;
                        case 'success':
                            klass = 'alert alert-success';
                        break;
                    }

                    //show reponse message
                    responseMsg.fadeOut(200,function(){
                        $(this).removeClass('response-waiting')
                               .addClass(klass)
                               .text(responseData.message)
                               .fadeIn(200,function(){
                                   //set timeout to hide response message
                                   setTimeout(function(){
                                       responseMsg.fadeOut(200,function(){
                                           $(this).removeClass(klass);
                                           form.data('formstatus','idle');
                                       });
                                   },3000)
                                });
                    });
                }
            });
        }

my HTML form:

<form id="newsletter-signup" action="?action=signup" method="post">
         <input type="text" size="37" placeholder="Enter your email" name="signup-email" id="signup-email"/>
         <input type="submit" value="SUBMIT" style="padding: 8px;" id="signup-button"/>
         <div id="signup-response"></div>
                                    </form>

Do you guys happen to know what it is i'm doing wrong?

The alert box does seem to trigger once i do this:

var form = $(this),
                formData = form.serialize(),
                formUrl = form.attr('action'),
                formMethod = form.attr('method'),
                responseMsg = $('#signup-response').text();
                    swal({
                        title: "Success",
                        text: "You've successfully subscribed!",
                        type: "success",
                        timer: 3000,
                        allowOutsideClick: "true"
                    });

but it doesn't pass out that response from the php side if the user entered something correctly or not.