AngularJS POST submitting not working

Question

I'm learning AngularJS and so far I'm enjoying the framework, but there has been a snag I hit that has really got my wheels spinning and I need some help.

I have a form that I want to submit to some server-side code but when it gets to the server side code, it states that no POST data is present, further more, doing a console.log does nothing to help as whenever I add it, it doesn't show up in my firebug console. I've looked all around and tried everything but am stuck.

My AngularJS Code:

var AdminApp = angular.module('AdminApp', ['ui.router']);

// configure our routes
AdminApp.config(function($locationProvider, $stateProvider, $urlRouterProvider) {

$urlRouterProvider.otherwise('/main');

$stateProvider.state('main', {
        url: '/main',
        templateUrl: 'Content/index.html',
        controller: 'mainController'
    });

AdminApp.controller('mainController', function($scope, $http) {

$scope.message = 'test';

//load up our notes.
$http.get('Server/companyNotes.php?companyId=1').success(function(data) {
    $scope.notes = data;
    $scope.loading = false;
});

$scope.processForm = function() {

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

    }).success(function(data){

        alert('sent!');

    });
};

});

My html form:

<form name="addNote" ng-submit="processForm()">
<textarea id="notes" name="notes" ng-model="form.note"></textarea><br>
<input type="hidden" name="companyId" id="companyId" value="1" ng-model="form.companyId">
<input type="hidden" name="added_by" id="added_by" value="Demo User" ng-model="form.added_by">
<button type="submit" class="btn btn-sm btn-primary">Add Note</button>
</form>

I do have ng-app setup on my html tag.

I've tried several things and its simply frustrating me. I hope someone can help me figure this out as I'm must be doing something wrong and not seeing it.

Thanks

EDIT: It seems Summernote is the problem for the case of my textarea not working.

I suspect that potentially this line could be the problem: enter code here`data: $.param($scope.form) (http://api.jquery.com/jquery.param/) Could you provide an example of your server side code? — Oliver, May 27 '14 at 13:34
I took that out and still I get no POST data sent to the server code. — Eman, May 27 '14 at 13:43
I suspect that your issue is with your server side code/setup. Your sample code works fine [**here**](http://plnkr.co/edit/xZYtw64jaLqrOYjQ0FIK?p=preview). When I inspect the request in the Network tab of my browser's dev tools, I can see that a payload is parameterized and sent. — Marc Kline, May 27 '14 at 13:48
Add an action and method to your form tag and see if that works to rule out Angular issues: `
` — Marc Kline, May 27 '14 at 13:58
I'd have a look at the HTTP POST in Chrome's Network Tab in Dev Tools to see exactly what is being sent to your server code. If the Request has data and your PHP doesn't then there is a mismatch in what you PHP expects and what was sent. — Oliver, May 27 '14 at 14:06
it seems that $scope.form is blank but I don't know why that is — Eman, May 27 '14 at 14:08
If $scope.form is undefined, you should be seeing a console error for `$.param($scope.form)` but it sounds like you aren't — Marc Kline, May 27 '14 at 14:12
actually i did. firefox seems not trigger that but chrome did. — Eman, May 27 '14 at 14:18
As long as you enter input into the textarea before submitting, `$scope.form` should not be undefined. Your hidden fields do seem to be wired incorrectly, however. You might consider populating them in the controller, e.g. `$scope.form.added_by = 'Demo User'` — Marc Kline, May 27 '14 at 14:25
I can't as that will be dynamic eventually, currently this is just for testing the basics. — Eman, May 27 '14 at 14:27
I discovered something that may be the problem. it seems a jquery plugin is mucking it up, took it off and the textarea is now populated. — Eman, May 27 '14 at 14:30
Join me in this chat: http://chat.stackoverflow.com/rooms/54533/angularjs-post-submitting-not-working — Marc Kline, May 27 '14 at 14:32

score 0 · Answer 1 · answered May 27 '14 at 13:33

0

Do you control that server? Is this a cross-origin request?

Add an error routine to your requests and check it's outcome

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

}).success(function(data){

    alert('sent!');

})
  .error(function(reason){
     console.dir(reason);
   });

answered May 27 '14 at 13:33

Wottensprels

3,307
2
29
38

Yes I do control the server code. its a local request. – Eman May 27 '14 at 13:42
Then also add a logging routine to your server-side code, seeking for request errors. Ensure that the server will respond with a valid answer when a request fails. This will then trigger the `error` routine – Wottensprels May 27 '14 at 13:45
I added a var_dump to my PHP code and it claims my post is blank. – Eman May 27 '14 at 13:47
What does your server say about the request method? `$_SERVER['REQUEST_METHOD']` – Wottensprels May 27 '14 at 13:48
it says its a post request. – Eman May 27 '14 at 13:50
1

Meh. I'm about to give up :(. It is almost like asking if you got the plug plugged in, but are you sure that `$scope.form` is filled? Good luck with the issue, hopefully someone smarter than me will come along – Wottensprels May 27 '14 at 13:54
well it seems that yea $scope.form is not getting populated, so next issue is seeing why that is. – Eman May 27 '14 at 13:57
One thing to look at is your hidden fields: http://stackoverflow.com/questions/18446359/angularjs-does-not-send-hidden-field-value – Marc Kline May 27 '14 at 14:04
that helped a little but it still claiming its blank – Eman May 27 '14 at 14:26

score 0 · Answer 2 · answered May 27 '14 at 14:43

0

Try to use this in your serverside code:

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

And use the $aPost variable as POST array.

answered May 27 '14 at 14:43

Pataar

651
8
14

score 0 · Accepted Answer · answered May 27 '14 at 15:34

0

I figured out my initial problem.

I was using summernote to allow formatting but it seems that losing the value for angular.

I'll have to look for another tool for that, but I'm happy that I passed that hurdle finally, thanks to everyone who assisted me.

answered May 27 '14 at 15:34

Eman

1,093
2
26
49

for anyone that wants to know,I found an angular directive for summernote so that I can still use it https://github.com/outsideris/angular-summernote – Eman May 30 '14 at 17:45

AngularJS POST submitting not working

3 Answers3