JavaScript code won't send email using ajax

Question

I have a JS code as below :

function validateForm(){


 // some code 
 $.get("../sendMail.php");

 alert('Reached here ? then the mail was sent successfully');
 // more stuff

}

and the sendMail.php code :

<?php
$to = "someone@gmail.com";
$subject = "MY PHP MESSAGE";

$name = $_REQUEST['myName"'];
$phone = $_REQUEST['myPhone'];
$email = $_REQUEST['myEmail'];

$message .= "<br>"."<br>";

$message .= "<strong><font color='red'>Information Below.</font></strong>"."<br>"."<br>";

$message .= "<strong>Name:</strong> ".$name ."<br/>";
$message .="<strong>Phone:</strong> ".$phone."<br/>";
$message .="<strong>Email:</strong> ".$email."<br/>";

$headers  = 'MIME-Version: 1.0' . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$headers .= 'From: michaeljackson@gmail.com' . "\r\n";

mail($to,$subject,$message,$headers);   
?>

Even though the alert in the JS works great , the mail is not sent .

Any idea what's wrong with the code ?

Much appreciated

(FYI , I'm running on the localhost , if it makes any difference)

EDIT :

$.ajax({
    url: '../sendMail.php',
    success: function(data, textStatus, jqXHR){
        alert(console.log('data: %O', data));
        alert(console.log('textStatus: %s', textStatus));
        alert(console.log('jqXHR: %O', jqXHR));
    },
    error: function(jqXHR, textStatus, errorThrown){
        alert(console.log('jqXHR: %O', jqXHR));
        alert(console.log('textStatus: %s', textStatus));
        alert(console.log('errorThrown: %s', errorThrown));
    }});

but nothing was sent , and nothing is being printed on the screen . No alert , nothing .

Answer 1

jQuery's .get method is asynchronous . Meaning that the alert will appear whether the AJAX call is successful or not. What you need is this:

$.get('../sendMail.php', function(data){
    console.log('Reached here ? then the mail was sent successfully');
}):

Incidentally, .get is a convenience alias for .ajax . If you're having trouble, you should use .ajax , which gives you more options for debugging:

$.ajax({
    url: '../sendMail.php',
    success: function(data, textStatus, jqXHR){
        console.log('data: %O', data);
        console.log('textStatus: %s', textStatus);
        console.log('jqXHR: %O', jqXHR);
    },
    error: function(jqXHR, textStatus, errorThrown){
        console.log('jqXHR: %O', jqXHR);
        console.log('textStatus: %s', textStatus);
        console.log('errorThrown: %s', errorThrown);
    }
});

See the documentation for .ajax for all the options available to you.

Answer 2

You are also missing the parameters to send to the PHP file, it is waiting to receive:

$name = $_REQUEST['myName"'];
$phone = $_REQUEST['myPhone'];
$email = $_REQUEST['myEmail'];

So you should also send them on the request:

$.ajax({
  type: "POST",
  url: "../sendMail.php",
  data: { myName: "John Doe", myPhone: "123456789", myEmail: "loller@dude.com" }
}).done(function( msg ) {
   alert( "Mail sent: " + msg );
});

I suggest you to learn about the AJAX request and how jQuery does it:

• https://developer.mozilla.org/en/docs/AJAX
• http://api.jquery.com/jquery.ajax/

Also refer on how PHP handles the $_REQUEST var:

• http://www.php.net/manual/en/reserved.variables.request.php

Greets!

Answer 3

Use this one,

var myName = $('#name').val(); //get from input fields
var myEmail = $('#email').val();
var myPhone = $('#phone').val();
$.ajax({
  url: "../sendMail.php", //url to send
  type:"get", //get or post
  data: "myName="+myName+"&myEmail="+myEmail+"&myPhone="+myPhone, //data to be send
  success:function(response){ //on success
    alert('Reached here ? then the mail was sent successfully');
  },
  error: function(response){ //on error
    alert(response);
  }
});