Pass form data to laravel controller using AngularJS

Question

I have a simple code here and want to pass data to the laravel controller so I can store it to the database. My codes are:

AccountController.php

public function store(Request $request)
    {
        Account::create(array(
            'email' => $request->get('email'),
            'name' => $request->get('text'),
            'age' => $request->get('age'),
        ));

        return ['success' => true];
    }

Blade

<form ng-submit="newAccount()">
          <div class="form-group">
            <label for="email">Email address</label>
            <input type="email" class="form-control" id="email" ng-model="accountData.email">
          </div>

          <div class="form-group">
            <label for="fullname">Full Name</label>
            <input type="email" class="form-control" id="fullname" ng-model="accountData.name">
          </div>

          <div class="form-group">
            <label for="age">age</label>
            <input type="email" class="form-control" id="age" ng-model="accountData.age">
          </div>
</form>

app.js

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

app.controller('accountsCtrl', function($scope, $http) {

 $scope.newAccount = function() {
      //add data
      $http.post('/api/accounts', 
      {
        //what will I put here to get the textbox values?
      }).
      .success(function(response) {
        scope.accounts = response;
      })
      .error(function(response) {
        console.log(response);
      });

    };

});

As you can see in my app.js, I'm stuck on how to get the data from the textbox in my blade. Is there an easy way to do this? Thank you.

why dont u use jquery for such a simple thing? you want to send it to the controller via ajax or via the submit form action — patricio
– patricio, Commented Sep 26, 2015 at 10:43

Pepijn · Accepted Answer · 2015-09-26 10:52:20Z

1

Pretty easy, you can just add an object to pass with the POST request. Laravel will pick these variables up 1 to 1.

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

app.controller('accountsCtrl', function($scope, $http) {

 $scope.newAccount = function() {
      //add data
      $http.post('/api/accounts', 
      {
        email: $scope.accountData.email,
        text: $scope.accountData.text,
        age: $scope.accountData.age

      }).
      .success(function(response) {
        scope.accounts = response;
      })
      .error(function(response) {
        console.log(response);
      });

    };

});

answered Sep 26, 2015 at 10:52

Pepijn

1,2041 gold badge11 silver badges25 bronze badges

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

3 Comments

Pepijn Over a year ago

Then you might have another probably, maybe you're hitting Laravel's mass assignment exception. Check your network tab in your console what's happening.

wobsoriano Over a year ago

I see the problem now, the $scope.accountData.email doesn't do it. It must be something. I tried a static value and it works. for example email: 'test'

Pepijn Over a year ago

@FewFlyBy Sorry for the late response, I see what you're doing wrong, all the form types are <input type="email" this should be type="text" otherwise it won't validate and won't send!

Collectives™ on Stack Overflow

Pass form data to laravel controller using AngularJS

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related