CODEWITHSUNDEEP
javascriptphpjqueryajax
JAN
JAN

Reputation: 21895

JavaScript code won't send email using ajax

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 .

Upvotes: 0

Views: 241

Answers (3)

Ethan Brown
Ethan Brown

Reputation: 27292

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.

Upvotes: 3

josetapadas
josetapadas

Reputation: 2647

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:

Greets!

Upvotes: 0

Amit Sukapure
Amit Sukapure

Reputation: 359

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

Upvotes: -1

Related Questions