CODEWITHSUNDEEP
angularjsformshttppost
Tidya
Tidya

Reputation: 39

http post in angularjs form

I am trying to get parameters from form in AngularJS and send it to a remote web API encoded in URL like this. http://lowc---.com/storeManager/createParentStore?token=6fc72be8-4153-432e-9191-64a9e3b23a9e&name=xyz%20store&city=1&address=abc

But I am receiving the following errors

 - TypeError: $http(...).success is not a function

 - Failed to load resource: the server responded with a status of 404 (Not Found)

 - Possibly unhandled rejection: {"data":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /storeManager/createParentStore</pre>\n</body>\n</html>\n","status":404,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://low----.com/storeManager/createParentStore","data":{"name":"$scope.user.name","city":"$scope.user.city","address":"$scope.user.address"},"headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"}angular.js:14328 Possibly unhandled rejection: {"data":"<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<title>Error</title>\n</head>\n<body>\n<pre>Cannot POST /storeManager/createParentStore</pre>\n</body>\n</html>\n","status":404,"config":{"method":"POST","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":"http://lowcost-env.2u3kmcbg4k.us-west-2.elasticbeanstalk.com/storeManager/createParentStore","params":{"name":"$scope.user.name","city":"$scope.user.city","address":"$scope.user.address"},"headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"}`


<!DOCTYPE html>
<html lang="en" ng-app="mainApp">

<head>
 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular-route.js"></script>

  <script src="addRetailerCtrl.js"></script>
</head>

<body ng-controller="addRetailerCtrl">

  <form class="form-horizontal" name="userForm" ng-submit="submitForm()">
    <div class="panel panel-default">
      <div class="panel-heading">
        <h3 class="panel-title"><strong>Add new </strong></h3>

      </div>

      <div class="panel-body form-group-separated">

        <div class="form-group">
          <label class="col-md-3 col-xs-12 control-label">Name</label>
          <div class="col-md-6 col-xs-12">
            <div class="input-group">
              <span class="input-group-addon"><span class="fa fa-pencil"></span></span>
              <input type="text" class="form-control" name="name" ng-model="user.name" />
            </div>

          </div>
        </div>

        <div class="form-group">
          <label class="col-md-3 col-xs-12 control-label">City</label>
          <div class="col-md-6 col-xs-12">
            <select class="form-control select" name="city" ng-model="user.city">
                                                <option>City 1</option>
                                                <option>City 2</option>
                                                <option>City 3</option>
                                                
                                            </select>

          </div>

        </div>
        <div class="form-group">
          <label class="col-md-3 col-xs-12 control-label">Address</label>
          <div class="col-md-6 col-xs-12">
            <textarea class="form-control" rows="5" name="address" ng-model="user.address"></textarea>

          </div>

        </div>

angular.module('mainApp', [])
  .controller('addRetailerCtrl', function($scope, $http) {
    alert('i am here');

    $scope.submitForm = function() {
      // Posting data to php file
      $http({
          method: 'POST',
          url: 'http://low--.com/storeManager/createParentStore?token=6fc72be8-4153-432e-9191-64a9e3b23a9e',
          // data    : $scope.user, //forms user object
          data: {
            name: "$scope.user.name",
            city: "$scope.user.city",
            address: "$scope.user.address"
          },
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded'
          }
        })
        .success(function(data) {

          $scope.message = data.message;

        });
    };
  });

Upvotes: 1

Views: 1524

Answers (1)

Chirag
Chirag

Reputation: 189

success() and error() have been deprecated from $http's custom callback methods while Migrating from 1.5 to 1.6.
You can use the standard then()/catch() promise methods instead, but note that the method signatures and return values are different.

Upvotes: 1

Related Questions