Ajax and Sending Forms

Question

I have an issue sending mail from my live site.

The weird thing is that when I disable the JavaScript, the mail is sent properly (I receive it in my inbox).

When I enable JavaScript and try to send it with Ajax, Ajax returns as successful, because I get my custom message of "thank you, your mail has been sent" (though it's never sent) appears. Because I am getting a success return, I must assume that the processing script is ran without error. Still, the mail isn't being sent when JavaScript is enabled.

Here is my ajax call:

if(success == false) {
        if(event.preventDefault) {
            event.preventDefault();
        }
    } else {
        event.preventDefault();

        $.ajax('mailprocess.inc.php', {
            type: "POST",
            data: form.serialize(),
            success: function() {
                var formWrapper  = $('.form-wrapper');
                var confirmMessageSection = $("<section class=\"confirm-message\"></section>");
                formWrapper.empty().append(confirmMessageSection);
                confirmMessageSection.html("<p>Thank you! Your message has been sent.</p>").hide().fadeIn(1500);            
            },
            error: function(request, errorType, errorMessage) {
                var formWrapper = $('.form-wrapper');
                var errorMessageSection = $("<section class=\"email-error\"></section>");
                formWrapper.empty().append(errorMessageSection);
                errorMessageSection.html("<p>Sorry, there was an error.</p><p>Request error type: " + request + "</p><p>Error type: " + errorType + "</p><p>Error Message: " + errorMessage + "</p>").hide().fadeIn(1500);  
            },
            timeout:5000,
            beforeSend: function() {
                //add spinner
                $('.form-wrapper').empty().addClass('is-loading');
            },
            complete: function() {
                //remove spinner
                $('.form-wrapper').removeClass('is-loading');
            }
        });
     }

Here is the first bit of my processing script (at the top of my contact.php file):

<?php

//set up arrays for processing script

$errors = array();
$missingInputs = array();
if(isset($_POST['send'])) {
//parameters for mail() function
    $to = "mail@server.com";
    $subject = "Message";

    //fields expected
    $expectedFields = array('name', 'email', 'comments');
    //required fields
    $requiredFields = array('name', 'email', 'comments');

    $mailHeaders = "From: The site <me@mysite.com>\r\n";
    $mailHeaders .= 'Content-Type: text/plain; charset=utf-8';

    require 'mailprocess.inc.php';


}
?>

Here is my processing script:

<?php
//for now, nothing the user has inputted is suspicious
$suspicious = false;
$pattern = '/Content-Type:|Bcc:|Cc:/i';

//this checks for suspicious phrases
function isSuspicious($val, $pattern, &$suspicious) {
    if(is_array($val)) {
        foreach ($val as $item) {
            isSuspicious($item, $pattern, $suspicious);
        }
    } else {
        if(preg_match($pattern, $val)) {
            $suspicious  = true;
        }
    }
}

isSuspicious($_POST, $pattern, $suspicious);

if($suspicious == false) {
    foreach ($_POST as $nameAttributeValue => $userInputtedValue) {
        //take user input (ex. their name they typed in the form) and store it into a variable called $temp
        if(is_array($userInputtedValue)) {
            $temp = $userInputtedValue;
        //if user input is not an array, strip out whitespace first
        } else {
            $temp = trim($userInputtedValue);
        }

        //if the user left the field open and it's required (they all are), add the "key" ("name", "email", "comments") to the missing array
        if(empty($temp) && in_array($nameAttributeValue, $requiredFields)) {
            $missingInputs[] = $nameAttributeValue;
        //if the user filled out the field, assign the name attribute value ("name", "email" or "comments") to a variable of the same name as itself (ie. if it's 'name', the variable will be $name)
        } elseif(in_array($nameAttributeValue, $expectedFields)) {
            ${$nameAttributeValue} = $temp;
        }
    }
}

if(!$suspicious && !empty($email)) {
    $validEmail = filter_input(INPUT_POST, 'email', FILTER_VALIDATE_EMAIL);
    if($validEmail) {
        $mailHeaders .= "\r\nReply-To: $validEmail";
    } else {
        $errors['email'] = true;
    }
}


$sentMail = false;

if(!$suspicious && !$missingInputs && !$errors) {
    $message = '';
    foreach ($expectedFields as $item) {
        if(isset(${$item}) && !empty(${$item})) {
            $val = ${$item};
        } else {
            $val = 'Not selected';
        }
        if(is_array($val)) {
            $val = implode(', ' ,$val);
        }
        $item = str_replace(array('_', '-'), ' ', $item);
        $message .= ucfirst($item) . " : $val\r\n\r\n";
        $message = wordwrap($message, 70);
    }   




    $sentMail = mail($to, $subject, $message, $mailHeaders);
    if(!$sentMail) {
        $errors['mailNotSent'] = true;
    }

}

?>

Any ideas? I'm pretty stumped.

EDIT:

After console.logging the data I get back from success as per the first answer, I got back this error:

Warning: in_array() expects parameter 2 to be array, null given in /home/mailprocess.inc.php on line 36

So I moved the arrays over to the mail processing file, and no longer receive that error. In fact, console.log(data) returns blank. The mail says it's still being sent via Ajax, but it still isn't.

Answer 1

Sorry to say that dear you are using too much complex code try this one:

index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<title>Jquery Mail</title>

<script type="text/javascript">
$(document).ready(function(e) {
$('#send').click(function()
{
    $.ajax({
    type:'POST',
    url:"mail.php",
    data:"name="+$('#name').val()+"&email="+$('#email').val()+"&phone="+$('#phone').val()+"",
    async:false,
    success: function(result)
    {
        alert(result);
    }
});
})

   });
</script>
</head>

<body>
<table width="500" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" align="center">Mail Form</td>
</tr>
<tr>
<td width="119">&nbsp;</td>
<td width="86">&nbsp;</td>
<td width="246">&nbsp;</td>
<td width="23">&nbsp;</td>
<td width="26">&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Name:</td>
<td><input type="text" name="textfield" id="name" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Email</td>
<td><input type="text" name="textfield2" id="email" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>Phone:</td>
<td><input type="text" name="textfield3" id="phone" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td>&nbsp;</td>
<td><input type="submit" name="button" id="send" value="Send" /></td>
<td>&nbsp;</td>
<td>&nbsp;</td>
</tr>
</table>
</body>
</html>

mail.php

<?php
if(isset($_POST['name']))
{
$name=$_POST['name'];
$email=$_POST['email'];
$phone=$_POST['phone'];

/*

Here You Can Set your mail Function


*/

echo "Entered Name= ".$name.", Entered Email= ".$email.", Entered Phone= ".$phone;
}
?>

Answer 2

Can you replace your succes function with this :

console.log(form.serialize()) ;
 $.ajax('mailprocess.inc.php', {
        type: "POST",
        data: form.serialize(),
        success: function(data) {
            console.log(data) ;

It will show in console first the content submitted, just to check if it's correct, and then the output of your php file called in ajax.

The fact that you have your "Thank you! Your.." message only means that your php file is callable by ajax (no 404 or 500 error), but you don't know anything else, like is there any problem on php code... or else)