nitsuj
nitsuj

Reputation: 780

How to get "success" with jQuery AJAX email form

I have created a simple email form on a website - Processing it through AJAX using the jQuery library.

I know that the form is working because I am receiving the test email, but I will need for the user to know that their email has sent. Currently, there is no event happening upon success. It should be replacing the form (in div #contactform) with a success message. What am I missing here?

NOTE: I looked at the activity in Safari after submitting the form and it shows my process.php script, but it says "cancelled". Why is it doing this, and could it have something to do with why it is not showing a success message?

Here's my script:

HTML

<div id="contactform">
    <form id="churchcontact" action="" method="POST">

        <ul>
            <li>
                <label for="name">Name</label>
                <span class="error error_name">Please enter your name</span>
                <input id="name" type="text" name="name" />
            </li>

            <li>
                <label for="email">Email</label>
                <span class="error error_email">Please enter your email address</span>
                <input id="email" type="text" name="email" />
            </li>

            <li>
                <label for="message">Message</label>
                <span class="error error_message">Please write a message</span>
                <textarea id="message" name="message"></textarea>
            </li>

            <li>
                <input class="formsubmit" type="submit" value="Send" />
            <li>
        </ul>

    </form>
    </div>

jQUERY

$(document).ready(function() {


    ////////////////////////////////////
    //// form submit                ////
    ////////////////////////////////////
    $('#churchcontact').submit(function() {


        ////////////////////////////////////
        //// validation                 ////
        ////////////////////////////////////
        $('.error').hide();

        //message
        var message = $('textarea#message').val();
        if(message == '') {
            $('.error_message').show();
            $('textarea#message').focus();
            var errors = 'true';
        }


        //email
        var email = $('input#email').val();
        var atpos = email.indexOf("@");
        var dotpos = email.lastIndexOf(".");
        if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length || email == '') {
            $('.error_email').show();
            $('input#email').focus();
            var errors = 'true';
        }

        //name
        var name = $('input#name').val();
        if(name == '') {
            $('.error_name').show();
            $('input#name').focus();
            var errors = 'true';
        }




        if(errors) {
            return false;
        } else {


            ////////////////////////////////////
            //// process                    ////
            ////////////////////////////////////

            var dataString = 'name='+ name + '&email=' + email + '&message=' + message;
            //alert (dataString);return false;
            $.ajax({
                type: "POST",
                url: "sites/all/modules/custom/churchcontact/process.php",
                data: dataString,
                success: function() {
                    $('#contactform').html("success!");
                }
            });



        }

        return false;

    });



});

PHP (process.php)

$name = $_POST['name'];
$email = $_POST['email'];
$msg = $_POST['message'];


$recipient = '[my email]';
$subject = 'Website Test';

$message = '
Name: ' . $name
. ', Email: ' . $email
. ', Message: ' . $msg;


mail($recipient, $subject, $message, $headers);

Upvotes: 0

Views: 2457

Answers (1)

mgraph
mgraph

Reputation: 15338

in process.php add an echo of mail():

$res = mail($recipient, $subject, $message, $headers);
echo $res;        //if $res returns 1 that means mail was sent

ajax success:

...
success: function(data) {
    if(data == 1){
        message = "success!";
    }
    else{
        message = "Error";
    }    
    $('#contactform').empty().html(message);
   }

Upvotes: 3

Related Questions