AngularJS - Form Submission

Question

I've recently started using AngularJS, and even though I am able to send data through $http when the webpage loads, I'm unable to do it when a button is pressed. My code:

<div ng-app="myApp" ng-controller="myCtrl">
    Username: <input type="text" id="u" ng-model="username"><br>
    Password: <input type="text" id="p" ng-model="password"><br>
    Email: <input type="text" id="e" ng-model="email"><br>
    First Name: <input type="text" id="fn" ng-model="firstName"><br>
    Last Name: <input type="text" id="ln" ng-model="lastName"><br>
    <br>
    <button onclick="sendData()">Click me</button>
    <br>
    {{status}}
</div>

<script>
    var app = angular.module('myApp', []);
    var arr = new Array();

    function sendData() {
        arr[0] = document.getElementById("u").value;
        arr[1] = document.getElementById("p").value;
        arr[2] = document.getElementById("e").value;
        arr[3] = document.getElementById("fn").value;
        arr[4] = document.getElementById("ln").value;

        app.controller('myCtrl', function($scope, $http) {
            $http.post("../signup.php", {'data' : arr})
                .success(function(response) {
                    $scope.status = response.status;
                    $scope.description = response.description;
                    $scope.content = response.content;
                });
        });
    }
</script>

With that code, the function in app.controller doesn't execute, but if I put it outside of the sendData() function, it does execute, but right after loading the page.

Can anyone help me getting it to work when the button is pressed?

biancamihai · Accepted Answer · 2015-08-12 23:00:47Z

SInce you want to use angular and you use ng-model in your view you should use ng-click on your button:

<button ng-click="sendData()">Click me</button>

Even better you can use ng-submit on your form and use a submit button.

In your controller you will have something like this:

$scope.username = '';
$scope.email = '';
// better have an user object here so you will not have n variables ...

$scope.sendData = function() {
     var arr = [];
     arr[0] = $scope.username;
     arr[1] = $scope.email;
     //........
     $http.post("../signup.php", {data : arr})
        .success(function(response) {
            $scope.status = response.status;
            $scope.description = response.description;
            $scope.content = response.content;
        });
}

user2954587 · Accepted Answer · 2015-08-12 22:59:29Z

You need to define the function on the scope of your controller

HTML

<button ng-click="sendData()">Click me</button>

JS

app.controller('myCtrl', function($scope, $http) {
    $scope.sendData = function(
        $http.post("../signup.php", {'data' : arr})
            .success(function(response) {
                $scope.status = response.status;
                $scope.description = response.description;
                $scope.content = response.content;
            });
     }
});

Collectives™ on Stack Overflow

AngularJS - Form Submission

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related