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

    ?>

If you look at the "Network" tab in the Chrome Console, do you see a request? Does it succeed or fail? What is the error code? — Mike Trpcic, Nov 19 '13 at 23:48
I get status code 200 OK.. it also shows there is content length (so some data is in there) — GRowing, Nov 20 '13 at 00:00
Status 200 OK means that the request is succeeding and completing, and the server (your PHP) is not causing any errors. You'll need to check your PHP code to see if perhaps it's not writing the file for some reason. — Mike Trpcic, Nov 20 '13 at 00:05
It's writing the file .. it writes the strings I hard coded... — GRowing, Nov 20 '13 at 00:19

score 16 · Accepted Answer · edited May 23 '17 at 12:07

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!

The `.success` and `.catch` methods are deprecated and removed from the AngularJS framework. The Content-Type header is wrong. It should be `application/json` as the backend is decoding json. — georgeawg, May 05 '19 at 05:41

score 2 · Answer 2 · answered Jul 08 '14 at 14:42

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

This looks really interesting. I will give it a try. – GRowing Jul 08 '14 at 19:16 — GRowing, Jul 08 '14 at 19:16

Angularjs - Form Post Data Not Posted?

2 Answers2

Linked