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 = "[email protected]";
$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: [email protected]' . "\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 .

Make sure you have a local mail server, because PHP's mail() function sends with the current machine's mail server... — Bun
– Bun, Commented Feb 7, 2014 at 16:51
Your script isn't checking whether mail() was successful. Check the Network tab of Developer Tools to see if the script reported any errors. — Barmar
– Barmar, Commented Feb 7, 2014 at 16:53

Ethan Brown · Accepted Answer · 2014-02-07 17:11:58Z

3

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.

edited Feb 7, 2014 at 17:11

answered Feb 7, 2014 at 16:47

Ethan Brown

27.4k5 gold badges84 silver badges95 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Ethan Brown Over a year ago

See my edit. I gave you some avenues for collecting extra information.

Ethan Brown Over a year ago

Add the code I suggested, then report back with what you see on the log. It will help us fix the problem.

Ethan Brown Over a year ago

Are you looking at the console log? I'm just not sure what you mean when you say "nothing is printed to the screen". There should be something....

JAN Over a year ago

I added another alert after the code you posted , and the alert works , but the code before that (your code) is not invoked ... I guess . I tried both with console and alert , but your code is not invoked .

Ethan Brown Over a year ago

Hm. Something strange is definitely going on. One of success or error should have been called. Can you put something in your PHP code so you know that you're getting there? Even a file_put_contents("C:\\temp\\test.txt", "mail function called"); would suffice....

|

josetapadas · Accepted Answer · 2014-02-07 17:00:12Z

0

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: "[email protected]" }
}).done(function( msg ) {
   alert( "Mail sent: " + msg );
});

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

Also refer on how PHP handles the $_REQUEST var:

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

Greets!

answered Feb 7, 2014 at 17:00

josetapadas

2,6573 gold badges22 silver badges20 bronze badges

Comments

Amit Sukapure · Accepted Answer · 2014-02-07 16:54:53Z

-1

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);
  }
});

answered Feb 7, 2014 at 16:54

Amit Sukapure

3592 silver badges11 bronze badges

Collectives™ on Stack Overflow

JavaScript code won't send email using ajax

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

7 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related