Angularjs - Form Post Data not showing?

Question

I have to admit that I'm a little confused ... I have never done this before, and I obviously missed something.

When I transfer data via http.post to my php file, I cannot collect data ...

Can someone tell me why this is not working?

FormData is displayed in the console log, and the file is written for sure .. however, it seems that the data is not being transmitted.

$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 the 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

Having done quite a bit of research, I found that this is more of a problem with the php specification. And I found the answers to these two posts.

here: Angular HTTP post for PHP and undefined

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

My last 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 thank Mike Brant ( https://stackoverflow.com/users/1529853/mike-brant ), the solution of which with reference to the column was very useful. I also voted for his answer.

My angular app code looks something like this ... and this is a great improvement from the original 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 to use $ _POST in php and not include jquery and use functions like $ .param (), for pure anjularjs you have to change app.js and add the following 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 default transformRequest $httpProvider.defaults.transformRequest = [ function ( data ) { return angular.isObject( data ) && String( data ) !== '[object File]' ? param( data ) : data; } ]; }] )