Sending form data to server in AngularJS

Question

I have my html like this:

<form ng-submit="addNews(news)" ng-controller='FormController'>

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

{{todos.autor}}
{{todos}}

<span> <var>result:</var> <mark>{{result}}</mark></span>
</form>

using the ng-model directive for the input(as you can see "todos.autor")

my controller (FormController) like this:

$scope.addNews = function(news){

    $http.post('send_data.php', {'autor': $scope.todos.autor}).
    success(function(data, status) {
        $scope.status = status;
        $scope.data = data;
        $scope.result = data;
    })

and finally my php (send_data):

<?php
$data = json_decode(file_get_contents("php://input"));
echo $data->autor;

?>

when the user clicks on submit I call the addNews function from my controller, this function should send the data the user write in the input, then on success the $scope.result will contains the info and finally the result will be mark up in the html (<mark>{{result}}</mark>) (a simple example).

The problem is that no result is shown unless I change my ng-model from todos.autor to simple autor and in the controller change from {'autor': $scope.todos.autor} to {'autor':$scope.autor} (I verified this) I really need to have the todos.autor and not a simple autor

how do I achive the controlled send the data in this way? thanks

You are trying to set a property 'autor' on 'todos'. $scope.todos doesnt exist. You need to declare it first. — user2808895
– user2808895, Commented Nov 22, 2014 at 6:23
I set $scope.todos = {} for other purpose, is the same with or without it — user2580401
– user2580401, Commented Nov 22, 2014 at 6:24

Michael Coleman · Accepted Answer · 2014-11-23 04:41:41Z

I think your problem is here:

$http.post('send_data.php', {'autor': $scope.todos.autor})

You want to pass an todos object with an autor property , is that right? then you need to:

give the input another name

<input type="text" placeholder="autor" name="autor" 
   ng-model="autorName">

In the controller define the todos oject and then when you call the addNews function, assign the autor property and it value to the todos object:

var app = angular.module('app',[])
   .controller('FormController', function($scope) {

        $scope.todos = {};

        $scope.addNews = function(news){

            // assign the autor property and give it the
            // value from the form
            $scope.todos.autor = $scope.autorName;

            console.log($scope.todos.autor);    
        }; 
    });

Now you basically get:

$scope.todos = { autor : autorName }

See this demo - http://jsbin.com/rotizoziro/1/edit?html,js,console,output

Update

As the above code seemed to help the original poster, I have left it there for reference. However, as pointed out, my code could have been written more cleanly. So to try and clarify:

I believe the original posters problem was that they needed an object not a simple property to be passed back to the server.

From O.P.:
The problem is that no result is shown unless I change my ng-model from todos.autor to simple autor and in the controller change from {'autor': $scope.todos.autor} to {'autor':$scope.autor} (I verified this) I really need to have the todos.autor and not a simple autor

Which meant that an object needed to be setup and passed, as mentioned a better way to accomplish this would have been:
Leave original form input as it originally was i.e.

<input type="text" placeholder="autor" name="autor" ng-model="todos.autor">
<input type="submit" value="click">

Inside controller

$scope.todos = {};

$scope.addNews = function(news){

            // when this function is called $scope.todos.autor will have a value assigned 
            // from when the user filled out the input field

            // send object to backend
            $http.post('send_data.php', {'autor': $scope.todos}).
            success(function(data, status) {
                $scope.status = status;
                $scope.data = data;
                $scope.result = data;
            }

yes, this works, basically the trick is $scope.todos.autor = $scope.autorName, thanks
You don't need to do this, Angular can bind to todos.autor without having to copy it like this.

Collectives™ on Stack Overflow

Sending form data to server in AngularJS

1 Answer 1

Update

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Update

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related