Angular $http post request undefined in PHP

Question

Not able to make $http post request, getting undefined for $_POST["name"] in php and for all other posted data. but in my console printing all the data correctly, can u help me where I did mistake. I am sending data when click event is triggered, I am new to angular, please help me to solve this problem, Thanks to replies in advance.

angular.element(document.querySelector('#applyJob')).unbind('click').bind('click', function () {
    console.log($scope.userName+$scope.userEmail+$scope.userMobileNo+$scope.subject+$scope.userCoverLetter+$scope.attach);
    $http({
        method: "POST",
        url: "mailer.php",
        data: {
            name : $scope.userName,
            mail : $scope.userEmail,
            no : $scope.userMobileNo,
            subject : $scope.subject,
            message : $scope.userCoverLetter,
            attach : $scope.attach
        },
        headers: {'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
    });
});

my php code looks like below

require ('smtp_lib/phpmailer.php');
require ('smtp_lib/smtp.php');
$mail = new PHPMailer(); // create a new object
$mail->IsSMTP(); // enable SMTP
$mail->SMTPDebug = 1; // debugging: 1 = errors and messages, 2 = messages only
$mail->SMTPAuth = true; // authentication enabled
$mail->SMTPSecure = 'ssl'; // secure transfer enabled REQUIRED for GMail
$mail->Host = "smtp.gmail.com";
$mail->Port = 465; // or 587
$mail->IsHTML(true);
$mail->Username = "xxx@gmail.com";
$mail->Password = "yyyyyy";
$mail->FromName = $_POST["name"];
$mail->Subject = $_POST["subject"];
$mail->AddAddress("zzz@gmail.com");
$mail->AddReplyTo($_POST["mail"]);
$mail->Body = $_POST["message"].'<br>'.$_POST["no"];
$mail->AddAttachment($_POST["attach"]);
$mail->Send();

if I open php_error_log I getting these errors

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: name in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 16

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: subject in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 17

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: mail in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 20

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: message in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 21

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: name in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 21

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: mail in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 21

[29-Apr-2015 08:44:36 Europe/Berlin] PHP Notice:  Undefined index: no in C:\xampp\htdocs\wwwroot\contact-form\files\contact_mailer.php on line 21

Answer 1

This is a known issue Angular with Php you can solve this with;

var form = {name:"x",mail:"x",no:0,subject:"x",message:"x",attach:"x"};
var formData = new form(); 
formData.name = $scope.userName,
formData.mail = $scope.userEmail,
formData.no = $scope.userMobileNo,
formData.subject = $scope.subject,
formData.message = $scope.userCoverLetter,
formData.attach = $scope.attach

$http({
        method: "POST",
        url: "mailer.php",
        data: formData
});

In your php you take this with file_get_contents("php://input") ;

$postdata = file_get_contents("php://input");
$formData = json_decode($postdata);
echo $formData->name;

Answer 2

$post = json_decode(file_get_contents('php://input'), true); 

I added this above single line in mailer.php , my problem solved. Thanks for all replies.

Answer 3

First check $scope.userName if it's defined in the console before send the request and you can write it like this:

var data = {
            name : $scope.userName,
            mail : $scope.userEmail,
            no : $scope.userMobileNo,
            subject : $scope.subject,
            message : $scope.userCoverLetter,
            attach : $scope.attach  
          }

$http.post('mailer.php', { params: data }).
  success(function(data, status, headers, config) {
    // something
  }).
  error(function(data, status, headers, config) {
    // something else
  });

Answer 4

Add a directive to set as form post for all your http post request. your php code will remain the same

//Directive - change App with your app name
    App.factory("setAsFormPost", ['$rootScope', function($rootScope) {
        function transformRequest(data, getHeaders) {
            var headers = getHeaders();
            headers[ "Content-type" ] = "application/x-www-form-urlencoded; charset=utf-8";
            return($.param(data));
        }
        return(transformRequest);
    }]);

// you need to pass setAsFormPost to your controller like this
        App.controller('ControllerName',
        ['$scope','setAsFormPost', '$http', function($rootScope, $scope, messageHandler, settings, yiiBox, yiiHttp) {
        $http.post('mailer.php', {name : $scope.userName, mail : $scope.userEmail,
                no : $scope.userMobileNo, subject : $scope.subject, message : $scope.userCoverLetter,
                attach : $scope.attach}, {transformRequest: setAsFormPost}).success(function (result) {
            //something
        }).error(function (error) {
            //something
        });
    }]);