CODEWITHSUNDEEP
angularjsformshttppost
Tidya
Tidya

Reputation: 39

AngularJS http POST using form not working

// http.post gives 404 error no matter what so I am trying with GET
// $scope.user.name etc does bring correct values from form
// I think we can't view FormData on console but passing the 'data
// after appending $scope values, runs the get request without any //data
// so I tried to make a plain dummy object 'obj' with static
// values to check get request
// this too runs URL with no data
// response that i recieve is //{"success":"no","data":"","error_code":"DSWS3","error_descriptio//n":"Server Error"}

//and yes, testing the API with same parameters on Postman does //give correct result

var data = new FormData();
data.append('name', $scope.user.name);
data.append('city', $scope.user.city);
data.append('address', $scope.user.address);

var obj = {
  name: "fefe",
  city: "1",
  address: "fofo"
};


var data = JSON.stringify(obj);
console.log(data);
//alert(JSON.stringify(data));

$http.get('http://lowc----.com/storeManager/createParentStore?token=6fc72be8-4153-432e23a9e', data, {
  withCredentials: false,
  transformRequest: angular.identity,
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded'
  }
}).then(function(response) {
  console.log(response)
});

I am stuck at making this HTTP POST work.. I am getting the data from form and I want to append it at the end of the URL like this baseURL+token+&name=store%20name&city=this&address=that

It gives two errors also how can I make an object of the data I received from form to pass to the http data.

1. POST (url i provided) 404 not found
2. 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?token=6fc72be8-4153-432e-9191-64a9e3b23a9e","data":{"name":"$scope.user.name","city":"$scope.user.city","address":"$scope.user.address"},"headers":{"Content-Type":"application/x-www-form-urlencoded","Accept":"application/json, text/plain, */*"}},"statusText":"Not Found"}

Here is my HTML

 <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>Islamabad</option>
                                                <option>Rawalpindi</option>
                                                <option>Karachi</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>
</form>

Upvotes: 0

Views: 906

Answers (2)

Balasubramanian
Balasubramanian

Reputation: 718

Try this:

$http({ url:'http://low----.com/storeManager/createParentStore?token=6fc72be3-432e-9191-64a9e3b23a9e',
              method: "POST",
              headers: {
                    'Content-type': 'application/x-www-form-urlencoded'
                },
                data: JSON.stringify($scope.user),
                responseType: 'arraybuffer'
            }).success(function(data, status, headers, config) {
        console.log("success");
            }).error(function(data, status, headers, config) {
        console.log("error");
                return null;
            });

Upvotes: 0

CrazyMac
CrazyMac

Reputation: 462

You should not pass the $scope variables in quotes, remove the quotes and pass it as below,

var data = new FormData();
data.append('name', $scope.user.name);
data.append('city', $scope.user.city);
data.append('address', $scope.user.address);
$http.post('http://low----.com/storeManager/createParentStore?token=6fc72be3-432e-9191-64a9e3b23a9e', data, {
        withCredentials : false,
        transformRequest : angular.identity,
        headers : {
            'Content-Type' : undefined
        }
}).success(function(response) {
        console.log(response)
});

Upvotes: 1

Related Questions