AngularJS - sending form data to server

Question

I am trying to create a simple form with 2 input fields and a submit button. The first field is a simple dropdown for selecting Category and the other is a tags input field with auto-complete. Here is the Angular code:

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

        app.controller('MainCtrl', function($scope, tags) {      
                $scope.categories = [
                    {"value":0, "categoryname":"standard"},
                    {"value":1, "categoryname":"premium"},
                    {"value":2, "categoryname":"gold"}
                ];

                $scope.loadTags = function(query) {
                return tags.load(query);
              }

              $scope.submitData = function(){
                $scope.form = [];
                $scope.form[0] = $scope.category;  
                $scope.form[1] = $scope.tags;
                $http.post('ServerController.php', $scope.form, {'Content-Type': 'application/json'}).
                    success(function(data, status) {
                        $scope.status = status;
                        $scope.data = data;
                        $scope.result = data;
                   })
                    .error(function (data, status, header) {
                    $scope.ResponseDetails = "Data: " + data +
                        "<hr />status: " + status +
                        "<hr />headers: " + header;
                   });
                }   
            });

            app.service('tags', function($q, $http, $filter) {
                this.load = function(query) {
                    return $http.get('tags.json').then(
                         function(result) {
                             return $filter('filter')(result.data, query)
                         }
                    )};
            });

The HTML:

<body ng-app="plunker">    
    <form ng-controller="MainCtrl">
        <label><b>Category:</b></label>
        <select ng-model="category" ng-options="x.categoryname for x in categories track by x.value">
            <option value="">Choose a Category</option>
        </select>
        <p>Model: {{category}}</p>
        </br></br>
        <label><b>Tags:</b></label>
        <tags-input ng-model="tags" add-on-paste="true" display-property="tagname" placeholder="Add a Tag" add-from-autocomplete-only="true">
            <auto-complete max-results-to-show="4" min-length="2" source="loadTags($query)"></auto-complete>
        </tags-input>
        <p>Model: {{tags}}</p>
        <input ng-click="submitData()" type="submit" value="Submit"></input>
        <p>Submit result: {{result}}</p>
    </form>
</body>

Here is the server code:

$form_data = json_decode(file_get_contents('php://input'), true);
var_dump($form_data);
exit;

Here is the tags.json:

[{"id":"1","tagname":"wifi"},{"id":"2","tagname":"cable"},{"id":"3","tagname":"television"},{"id":"4","tagname":"geyser"},{"id":"5","tagname":"fridge"},{"id":"6","tagname":"sofa"},{"id":"7","tagname":"lift"},{"id":"8","tagname":"gas stove"},{"id":"9","tagname":"washing machine"},{"id":"10","tagname":"winston"},{"id":"11","tagname":"west"},{"id":"12","tagname":"owl"},{"id":"13","tagname":"tv"}]

Everything works fine except for the submission part xD. When I var_dump the http response ie. $form_data I get null value.

Well I am new to AngularJS and am looking for some constructive feedback, so that I'll know what to look for before I dive into documentation for answers.

yelp please..

EDIT:

Here is the screenshot of the console :

Sachila Ranawaka · Accepted Answer · 2016-07-07 07:43:25Z

1

try to convert your json to string before you send the request

var jsonString = JSON.stringify($scope.form);

$http({
    method : "POST",
    url : "ServerController.php",
    data : jsonString
}).then(function(response){
  $scope.status = response.status;
  $scope.data = response.data;
  $scope.result = response.data;
},function(response){
//error
})


$jsonString = file_get_contents('php://input');
$form_data = json_decode($jsonString, true);;
var_dump($form_data);

answered Jul 7, 2016 at 7:43

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

utkarsh2k2 Over a year ago

Thanks for the input. But it still gives null

Sachila Ranawaka Over a year ago

did u try it without the content type header

Sachila Ranawaka Over a year ago

did u check whether cross origin flag raised in the service

utkarsh2k2 Over a year ago

ok. M not sure if I understand if I get it entirely. But if its any help, the service works perfectly. It loads the tags available in tags.json in the auto-complete suggestion dropdown. The problem lies inside submitData()

utkarsh2k2 Over a year ago

one more thing, I am actually using symfony2 on server side, so the tags.json isn't really a file. Instead it is the response I am sending from the server from inside ServerController.php . So inside javascript code I actually $http.post(Routing.generate('my_route_to_submit'), jsonString) . Same as I used $http.get in the service return $http.get(Routing.generate('my_route_to_json_data')) , which works perfectly.

matpol · Accepted Answer · 2016-07-07 07:50:40Z

1

You can check what is being posted using the browsers inspector or checking the headers. I think your syntax is incorrect. See the docs here: https://docs.angularjs.org/api/ng/service/$http#post

It does not look like you are passing any data to the form as the first closing bracket is in the wrong place. e.g.

 $http.post('ServerController.php',data,config)

answered Jul 7, 2016 at 7:50

matpol

3,0741 gold badge16 silver badges20 bronze badges

4 Comments

utkarsh2k2 Over a year ago

I did notice and correct it, however it seems thats not the issue

matpol Over a year ago

console.log 'form' or $scope.form see whats in it.

utkarsh2k2 Over a year ago

Its an array with category and tags as elements.

utkarsh2k2 Over a year ago

I've added a screen shot of the console.

Collectives™ on Stack Overflow

AngularJS - sending form data to server

yelp please..

2 Answers 2

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

yelp please..

2 Answers 2

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related