Passing object to function in angular js

Question

Here I am trying to pass user entered data in to angular function so that i can send it to server. but data is not receing in function.

var app = angular.module('myApp', []);
            app.controller('myCtrl', function ($scope, $http) {
                  $scope.submitForm = function (data) {
                    console.log(data + " " + data.fname + " " + data.lname);
                    $http({
                        method: 'POST',
                        url: "update",
                        data: data,
                        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
                    }).success(function (result) {
                                              console.log(result);
                    });
                }
            });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>


<div ng-app="myApp" ng-controller="myCtrl">
                        <form  name="update">
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for=fname">First Name</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type=text"  class="form-control" id="fname" name="fname" placeholder="First Name"
                                           ng-bind="user.fname" data-validation="required" data-validation-error-msg="First Name required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for="lname">Last Name</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type=text"  class="form-control" id="lname" name="lname" placeholder="Last Name"
                                           ng-bind="user.lname" data-validation="required" data-validation-error-msg="Last  Name required"/>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="col-lg-4 col-md-4">
                                    <label for="submit" class="sr-only" >submit</label>
                                </div>
                                <div class="col-lg-8  col-md-8">
                                    <input type="submit"  class="form-control btn btn-success" id="update"
                                           ng-click="submitForm(user)"
                                           name="submit" placeholder="Submit"/>
                                </div>
                            </div>
                        </form>
                    </div>

Prasanth Bendra · Accepted Answer · 2017-02-09 06:11:36Z

2

Instead of ng-bind use ng-model

ng-bind="user.fname" ---> ng-model="user.fname",

use this for all form elements.

answered Feb 9, 2017 at 6:11

Prasanth Bendra

33.1k9 gold badges56 silver badges74 bronze badges

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

2 Comments

xrcwrn Over a year ago

$scope.submitForm = function () {                     console.log($scope.u);                     $http({                         method: 'POST',                         url: "updatedProfile",                         params: {u: $scope.u}                     })                             .then(function (response) {                                 console.log(response);                             });                 }

I an sending object u{fname,lname} to server but is it not receiving there what should i change

Prasanth Bendra Over a year ago

What is in $scope.u?, change this params: {u: $scope.u} to params: $scope.u and try.

Collectives™ on Stack Overflow

Passing object to function in angular js

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related