CODEWITHSUNDEEP
javascriptangularjs
rjsang
rjsang

Reputation: 1757

How to submit a straightforward form using Angular

Using angular, I want to submit a form and store the response. My code looks something like this:

<form ng-controller="myController" action="myAction" method="POST">
    <input type="text" name="name" />
    <input type="submit" ng-click="submit" />
</form>

<script>
    function myController($scope, $http) {
        $scope.submit = function() {
            $http.post(url, data).success(function(data) {
                $scope.result = data;
            });
        }
    }
</script>

How do I get url and data to be the form action and inputs, respectively? I don't want to send JSON, I want the server side to see this is a regular HTML form submit.

Upvotes: 3

Views: 212

Answers (2)

rjsang
rjsang

Reputation: 1757

Thank, @Vincent Ramdhanie, for pointing me in the right direction. Here's what I ultimately did, using plenty of jQuery thrown in:

function myController($scope, $http) {
    $('form').submit(function() {
        return false;
    }); 

    $scope.submit = function() {
        form = $('form');
        data = form.serialize();
        url = form.attr('action')

        $http.post(url, data, 
            { headers: 
                { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'}
            }).success(function(data) {
                $scope.result = data;
            }
        );
    }
}

Upvotes: 4

Vincent Ramdhanie
Vincent Ramdhanie

Reputation: 103145

This is how I accomplish this, start by binding the form data to your model, Then use a transform to transform your JSON data into regular post parameters. This solution depends on the jQuery param() function:

 <form ng-controller="myController" method="POST">
    <input type="text" name="name" ng-model="name"/>
    <input type="submit" ng-click="submit" />
 </form>

 function myController($scope, $http) {

    $scope.name = "";

    /* Helper function to transform the form post to a regular post rather than JSON */
    var transform = function(data) {
       return $.param(data);
    }

    $scope.submit = function() {
        $http.post('myAction', $scope.name, {
            headers: { 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
            transformRequest: transform
        })
         .success(function (data) {
             $scope.result = data;
         });
    }




}

Upvotes: 3

Related Questions