Send form with angular

Question

I have such angularJs script

var formApp = angular.module('formApp', []);
    formApp.controller('formController', ['$scope', '$http', function($scope, $http) {
        $scope.formData = {};
        $scope.processForm = function() {
            $http({
                method  : 'POST',
                url     : $('form').attr('action'),
                data    : $scope.formData,
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }
            })
                    .success(function(data) {
                        console.log(data);
                        if (!data.success) {
                            $scope.errorName = data.errors.name;
                            $scope.errorSuperhero = data.errors.superheroAlias;
                        } else {
                            $scope.message = data.message;
                            $scope.errorName = '';
                            $scope.errorSuperhero = '';
                        }
                    });
        };
    }]);

In my html

<div ng-app="formApp" ng-controller="formController" class="container">
    <div class="row">
        <div class="col-lg-8 center-block">
            <form action="/todo" ng-submit="processForm()">
                <label for="login">Login</label>
                <input ng-model="formData.login" id="login" type="text" name="" class="form-control" />
                <label for="pass">Password</label>
                <input ng-model="formData.pass" id="pass" type="password" name="" class="form-control" />
                <label for="email">Email</label>
                <input ng-model="formData.email" id="email" type="email" name="" class="form-control" />
                <input ng-click="Submit" class="btn btn-primary" type="button" value="Register now" />
            </form>
        </div>
    </div>
</div>

But in result my form doesn't send. Nothing happens. I do not know what's wrong doing. Please, help me to solve this problem

Is there a reason you aren't using `Content-Type: 'application/json'`? — David L, Sep 01 '15 at 17:56

score 2 · Answer 1 · answered Sep 01 '15 at 18:08

If you want to use ng-submit, replace your button input with something like this:

<input type="submit" id="submit" value="Register now" />

I would recommend, however, eliminating the ng-submit on the form element and modifying your input button to be:

<input ng-click="processForm()" class="btn btn-primary" type="button" value="Register now" />

either way will work, but you should not try to combine an ng-click on your submit button and ng-submit on your form.

See angular docs for ng-submit: https://docs.angularjs.org/api/ng/directive/ngSubmit

score 2 · Answer 2 · answered Sep 01 '15 at 18:21

2

Also, you can work with ng-submit: http://jsfiddle.net/sherali/HB7LU/17101/

change these: remove ng-click="Submit" and change type="submit"

<input class="btn btn-primary" type="submit" value="Register now" />

answered Sep 01 '15 at 18:21

Sherali Turdiyev

1,745
16
29

score -1 · Accepted Answer · answered Sep 01 '15 at 18:04

-1

Try like this

<form action="/todo"> .... <input ng-click="processForm()" class="btn btn-primary" type="button" value="Register now" /> </form>

Hope, this help

answered Sep 01 '15 at 18:04

Bogdan Ivanov

202
1
3
11

This solution doesn’t resolve the original problem, but uses a work-around. – ᴠɪɴᴄᴇɴᴛ Apr 06 '17 at 10:20

Send form with angular

3 Answers3