CODEWITHSUNDEEP
angularjsforms
utkarsh2k2
utkarsh2k2

Reputation: 1096

AngularJS - sending form data to server

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 : enter image description here

Upvotes: 1

Views: 922

Answers (2)

matpol
matpol

Reputation: 3074

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)

Upvotes: 1

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41397

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

Upvotes: 1

Related Questions