Question

I’m building a contact form that appears in a jQuery popup box. When you click submit, it uses AJAX and a PHP script to send the email. My problem is that, well, it doesn’t work. It goes ahead and submits the form as regular and the email is never sent. In the .ajax function, neither the success nor error function is called. Here is my code:

The popup opens when you click on this: (This part works)

<a href="mailto:[e-mail]" class="email">[e-mail]</a>

The jQuery script:

$(function() {
    $('a.email').click(function(event) {
        event.preventDefault();
        $('body').append('<div id="popupshadow"></div><div id="popup"></div>');
        $('#popupshadow').css({opacity:0}).animate({opacity:0.7},1000);
        $('#popup').css({opacity:0}).delay(1200).animate({opacity:1},800);
        $('#popup').html('<form class="contact" action="#" method="none"><table class="contact"><tr><td class="input-name">Name:</td><td><input type="text" name="name" size="25" /></td></tr><tr><td class="input-email">Email:</td><td><input type="email" name="email" size="25" /></td></tr><tr><td class="input-phone">Phone:</td><td><input type="phone" name="phone" size="25" /></td></tr><tr><td class="input-message">Message:</td><td><textarea name="message" cols="20" rows="5"></textarea></td></tr><tr><td></td><td><input type="submit" value="Send" /></td></tr></table><input type="hidden" name="to" value="' + $(this).attr('href').slice(7) + '"/></form><a href="mailto:' + $(this).attr('href').slice(7) + '" class="cancel">Send using your own mail program.</a>');
        $('form.contact').submit(function(event) {
            $('form.contact td').css('color','#000000');

            var name = $('form.contact input[name="name"]').val();
            var email = $('form.contact input[name="email"]').val();
            var phone = $('form.contact input[name="phone"]').val();
            var message = $('form.contact textarea[name="message"]').val();

            var valid = true;
            if(name == "") {
                valid = false;
                $('td.input-name').css('color','#FF0000');
            }
            if(email == "" && phone == "")
                valid = false;
            if(email == "")
                $('td.input-email').css('color','#FF0000');
            if(phone == "")
                $('td.input-phone').css('color','#FF0000');
            if(message == "") {
                valid = false;
                $('td.input-message').css('color','#FF0000');
            }

            if(valid) {
                $.ajax({url : 'http://nickentin.com/design/projects/visionprintmedia/js/contact.php',
                        data : {name : name,
                                email : email,
                                phone : phone,
                                message : message,
                                to : to},
                        type : 'post',
                        success : function(data) {
                            alert("SUCCESS");
                            $('#popup').html('<p style="text-align:center;">Your message has been sent.</p>');
                        },
                        error : function(data) {
                            alert("ERROR");
                        }
                });
            }
            event.preventDefault();
            return false;
        });
        $('#popupshadow, a.cancel').click(function(event) {
            $('#popup, #popupshadow').animate({opacity:0},500).delay(500).queue(function() { $(this).remove(); });
        });
    });
});

The PHP script:

<?php
    $name = $_POST['name'];
    $email = $_POST['email'];
    $phone = $_POST['phone'];
    $message = $_POST['message'];

    $to = $_POST['to'];
    $subject = 'Contact Form - http://visionprintmedia.com';

    $message = '<style type="text/css">
                    #wrap {
                        width:400px;
                        margin:30px auto;
                        border:1px #000000 solid;
                    }
                    header {
                        width:100%;
                        height:50px;
                        display:block;
                    }
                    header h1 {
                        font-size:18px;
                        margin:0px;
                        padding-left:5px;
                        padding-top:15px;
                    }
                    table {
                        width:100%;
                    }
                    table td {
                        vertical-align:text-top;
                    }
                    table td:first-child {
                        width:75px;
                    }
                    a {
                        color:#333333;
                        text-decoration:none;
                    }
                    a:hover {
                        text-decoration:underline;
                    }
                </style>
                <div id="wrap">
                    <header>
                        <h1>Contact Form - http://visionprintmedia.com</h1>
                    </header>
                    <table>
                        <tr><td>Name:</td><td>'.$name.'</td></tr>
                        <tr><td>Email:</td><td>'.$email.'</td></tr>
                        <tr><td>Phone:</td><td>'.$phone.'</td></tr>
                        <tr><td>Message:</td><td>'.$message.'</td></tr>
                    </table>
                    <footer>
                        This message was sent to '.$to.' as part of an automated contact form.  If you do not believe that you should have received this email, please forward this message to [e-mail] and we will resolve the issue.
                    </footer>
                </div>';

    $headers = 'From: [e-mail]' . "\r\n" .
               'Reply-To: ' . $email . "\r\n" .
               'MIME-Version: 1.0' . "\r\n" .
               'Content-type: text/html; charset=iso-8859-1' . "\r\n" .
               'X-Mailer: PHP/' . phpversion();

    //mail($to,$subject,$message,$headers);
    mail('[e-mail]',$subject,$message,$headers); // FOR TESTING ONLY
?>

I have a live version at http://nickentin.com/design/projects/visionprintmedia/contact.html. Just click on one of the email links. Thanks.

Answer 1

You need to change some stuff here:

<form class="contact" action="#" method="none">

Replace it as:

<form class="contact" action="" method="post" onsubmit="return false;">

This is the HTML for the form not to be submitted as a normal form. Next, to make sure the AJAX function is called, you need to add this:

<form class="contact" action="" method="post" onsubmit="return postAjax(this);">

And the JavaScript function postAjax(form) should be defined as:

function postAjax(form)
{
     var post = form.serialize();
     // Send the `post` to the server using your AJAX function.
}

In your PHP Script, do this:

if(mail(...))
    die("OK");
else
    die("Error! Unable to send mail!");

In your JavaScript, for that PHP code, use this inside the AJAX Receive function:

if(response == "OK")
    alert("Mail Sent");
else
    alert(response);

Hope this helps you! 🙂 All the best! 🙂