Reputation: 3818

AngularJS http not posting as a form

I'm trying to use angular http to post a form, and pass the data as a form package, NOT a request package.

My code:

    // $scope will allow this to pass between controller and view
    $scope.formData = {};

    // process the form
    $scope.processForm = function() {
    $http({
        method  : 'POST',
        url     : 'process.cfm',
        data    : $.param($scope.formData),  // pass in data as strings
        headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
    })

READING this

How can I post data as form data instead of a request payload?

I see the need to 'define' the data being passed like this:

$.param({fkey: "key"});

Where my example is using

$.param($scope.formData);

in hopes of NOT having to explicitly state each form field... the fields themselves cast the field into the var like this

<input type="text" name="name" class="form-control" placeholder="blah" ng-model="formData.name" >

when I submit - I get NOTHING posted.

If it helps - I took this example from: http://scotch.io/tutorials/javascript/submitting-ajax-forms-the-angularjs-way

AND My full code is here: http://jsfiddle.net/mhLDP/ ALTHOUGH this doesn't behave as expected - it shows the {{ }}

so here is my full code:

<!doctype html >

<head>

    <title>Angular Form</title>

    <!-- LOAD BOOTSTRAP CSS -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" >

    <!-- LOAD JQUERY -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js" ></script>

    <!-- LOAD ANGULAR -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"></script>

    <!-- PROCESS FORM WITH AJAX (NEW) -->
    <script>

        // define angular module/app
        var formApp = angular.module( 'formApp', [] );

        // create angular controller and pass in $scope and $http
        function formController( $scope, $http ) {

            // create a blank object to hold our form information
            // $scope will allow this to pass between controller and view
            $scope.formData = {};

            // process the form
            $scope.processForm = function() {
            $http({
                method  : 'POST',
                url     : 'process.php',
                data    : $.param($scope.formData),  // pass in data as strings
                headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
            })
                .success(function(data) {
                    console.log(data);

                    if (!data.success) {
                        // if not successful, bind errors to error variables
                        $scope.errorName = data.errors.name;
                        $scope.errorSuperhero = data.errors.superheroAlias;
                    } else {
                        // if successful, bind success message to message
                        $scope.message = data.message;
                    }
                });

            };

        }

    </script>
</head>

<!-- apply the module and controller to our body so angular is applied to that -->
<body ng-app="formApp" ng-controller="formController" >

    <div class="container" >

        <div class="col-sm-6 col-sm-offset-3" >

            <!-- PAGE TITLE -->
            <div class="page-header" >

                <h1><span class="glyphicon glyphicon-tower" ></span> Submitting Forms with Angular</h1>

            </div>

            <!-- SHOW ERROR/SUCCESS MESSAGES -->
            <div id="messages" ng-show="message" >{{ message }}</div>

            <!-- FORM -->
            <form ng-submit="processForm()" >

                <!-- NAME -->
                <div id="name-group" class="form-group" ng-class="{ 'has-error' : errorName }" >

                    <label>Name</label>
                    <input type="text" name="name" class="form-control" placeholder="Bruce Wayne" ng-model="formData.name" >
                    <span class="help-block" ng-show="errorName" >{{ errorName }}</span>

                </div>

                <!-- SUPERHERO NAME -->
                <div id="superhero-group" class="form-group" ng-class="{ 'has-error' : errorSuperhero }" >

                    <label>Superhero Alias</label>
                    <input type="text" name="superheroAlias" class="form-control" placeholder="Caped Crusader" ng-model="formData.superheroAlias" >
                    <span class="help-block" ng-show="errorSuperhero" >{{ errorSuperhero }}</span>

                </div>

                <!-- SUBMIT BUTTON -->
                <button type="submit" class="btn btn-success btn-lg btn-block" >

                    <span class="glyphicon glyphicon-flash" ></span> Submit!

                </button>

            </form>

        </div>

    </div>

</body>

And here is the header from Firebug:

Response Headers
Connection  close
Content-Type    text/html;charset=UTF-8
Date    Fri, 31 Jan 2014 14:40:41 GMT
Server  Apache/2.2.22 (Win32) mod_jk/1.2.32
Transfer-Encoding   chunked
server-error    true
Request Headers
Accept  application/json, text/plain, */*
Accept-Encoding gzip, deflate
Accept-Language en-US,en;q=0.5
Content-Type    application/x-www-form-urlencoded
Cookie  
Host    127.0.0.1
Referer http://127.0.0.1/index_angularJS.htm
User-Agent  Mozilla/5.0 (Windows NT 6.3; WOW64; rv:26.0) Gecko/20100101 Firefox/26.0

Upvotes: 0

Answers (2)

user7098427

Reputation: 21

       $scope.processForm = function($scope.formData) {
        $http({
            method  : 'POST',
            url     : 'process.php',
            data    : $.param($scope.formData),  // pass in data as strings
            headers : { 'Content-Type': 'application/x-www-form-urlencoded' }  // set the headers so angular passing info as form data (not request payload)
        })

you have to pass $scope.formData in function

Upvotes: 2

Alejandro Silva

Reputation: 9118

the instruction $.param({data : $scope.formData}); produce the following object:

{
   data: {
      name: 'user input name',
      superheroAlias: 'user input alias'
   }
}

and $.param($scope.formData),

{
   name: 'user input name',
   superheroAlias: 'user input alias'
}

for your php file, yo should use:

data    : $.param($scope.formData),

Upvotes: 0

AngularJS http not posting as a form

Answers (2)

Related Questions