Angularjs - Form Post Data Not Posted?

Question

I must admit I am a little bit confused... I have never done this before and I am apparently missing something

When I pass data via http.post to my php file I am can't seem to collect data...

Can someone tell me why this does not work?

FormData gets displayed in console log,, and the file is being written for sure.. however it looks like no data is passed..

$scope.submitForm = function() {
    formData = $scope.form;

    $http.post('form2.php', JSON.stringify(formData)).success(function(){

        console.log(formData);
        //window.location.href = "form2.php?data=" + JSON.stringify(formData);

    });
};

This is in my php file.. trying to write data from submitted form to a file... (just testing)..

    <?php

        $file = 'form2.txt';
        $data = json_decode($_REQUEST['data'],true);

        //print( '<pre>' );
        //print_r ($data);
        //print( '</pre>' );

        $data_insert = "Name: " . $data['firstname'] .
                    ", Email: " . $data['emailaddress'] . 
                    ", Description: " . $data['textareacontent'] . 
                    ", Gender: " . $data['gender'] . 
                    ", Is Member: " . $data['member'];

        //print $data_insert;

        file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);

    ?>

Answer 1

After doing quite some research I discovered that this is somewhat of a php speciffic issue.. and I found answersa on these two posts..

here: Angular HTTP post to PHP and undefined

and here: http://sebgoo.blogspot.ca/2013/05/angularjs-post-data-to-php.html

My final PHP code looks like this..

        $file = 'form2.txt';

        $postdata = file_get_contents("php://input");
        $data = json_decode($postdata, true);


        $data_insert = "Name: " . $data['firstname'] .
                ", Email: " . $data['emailaddress'] . 
                ", Description: " . $data['textareacontent'] . 
                ", Gender: " . $data['gender'] . 
                ", Is a member: " . $data['member'];


        //print $data_insert;

        file_put_contents($file, $data_insert, FILE_APPEND | LOCK_EX);

I would also like to credit Mike Brant (https://stackoverflow.com/users/1529853/mike-brant) whose solution from a referenced stack post was very helpful.. I up-voted his response too.

My angular app code looks something like this... and it is a great improvement from the original one thanks to artur grzesiak (https://stackoverflow.com/users/2956115/artur-grzesiak)

var app = angular.module('myApp', []);

app.controller('FormCtrl', function ($scope, $http) {

var formData = {
    firstname: "default",
    emailaddress: "default",
    textareacontent: "default",
    gender: "default",
    member: false
};


$scope.submitForm = function() {

    $http({

        url: "form2.php",
        data: $scope.form,
        method: 'POST',
        headers : {'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'}

    }).success(function(data){

        console.log("OK", data)

    }).error(function(err){"ERR", console.log(err)})
};

});

Finally,, the HTML form that was used to submit this form looks something like this...

<div ng-app="myApp">

    <form ng-controller="FormCtrl" ng-submit="submitForm()">
        First name:    <br/><input type="text" ng-model="form.firstname">    <br/><br/>
        Email Address: <br/><input type="text" ng-model="form.emailaddress"> <br/><br/>
        Description:<br/> <textarea rows="3" cols="25" ng-model="form.textareacontent"></textarea>
            <br/>
        <input type="radio" ng-model="form.gender" value="female" />Female ...
        <input type="radio" ng-model="form.gender" value="male" />Male <br/>
            <br/>
        <input type="checkbox" ng-model="form.member" />Already a member
            <br/>
        <input type="submit" ngClick="Submit" >
    </form>

</div>

Thanks to everyone who helped!

Answer 2

If you want use $_POST in php and don't include jquery and use that functions like $.param(), for pure anjularjs you should modify app.js and add this lines:

.config( [ '$httpProvider',
function ( $httpProvider ) {
    // Use x-www-form-urlencoded Content-Type
    $httpProvider.defaults.headers.post[ 'Content-Type' ] = 'application/x-www-form-urlencoded;charset=utf-8';

    /**
     * The workhorse; converts an object to x-www-form-urlencoded serialization.
     * @param {Object} obj
     * @return {String}
     */
    var param = function ( obj ) {
        var query = '',
            name, value, fullSubName, subName, subValue, innerObj, i;

        for ( name in obj ) {
            value = obj[ name ];

            if ( value instanceof Array ) {
                for ( i = 0; i < value.length; ++i ) {
                    subValue = value[ i ];
                    fullSubName = name + '[' + i + ']';
                    innerObj = {};
                    innerObj[ fullSubName ] = subValue;
                    query += param( innerObj ) + '&';
                }
            } else if ( value instanceof Object ) {
                for ( subName in value ) {
                    subValue = value[ subName ];
                    fullSubName = name + '[' + subName + ']';
                    innerObj = {};
                    innerObj[ fullSubName ] = subValue;
                    query += param( innerObj ) + '&';
                }
            } else if ( value !== undefined && value !== null )
                query += encodeURIComponent( name ) + '=' + encodeURIComponent( value ) + '&';
        }

        return query.length ? query.substr( 0, query.length - 1 ) : query;
    };

    // Override $http service's default transformRequest
    $httpProvider.defaults.transformRequest = [
        function ( data ) {
            return angular.isObject( data ) && String( data ) !== '[object File]' ? param( data ) : data;
        }
    ];
}] )