AngularJS http POST using form not working

Question

// 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>

CrazyMac · Accepted Answer · 2017-04-12 10:21:41Z

1

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)
});

edited Apr 12, 2017 at 10:21

answered Apr 12, 2017 at 10:10

CrazyMac

4621 gold badge4 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Tidya Over a year ago

Thanks, I have corrected that but the 404 error still persist. Does this really create a URL in the format I require and call it?

CrazyMac Over a year ago

I have edited my answer to match your requirement. Please copy/paste and try

Tidya Over a year ago

Now it gives this error, I tried to change 'name' with 'sname' instead but that too gave the same error TypeError: Cannot read property 'name' of undefined

CrazyMac Over a year ago

It means your $scope.user is undefined and you are trying to refer name of undefined.. So check if you are getting any values under $scope.user.. Key name should be the same as you tried in Postman

Tidya Over a year ago

I fixed this issue, I checked by alerting $scope.user.name and it does give me the value I enter in the form field. Also .success was giving error too, so I changed it to .then. But POST (url) 404 not found and Possibly unhandeled rejection errors are back, moreover I think data object is not properly populated as it is empty.

|

Balasubramanian · Accepted Answer · 2017-04-12 11:01:09Z

0

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;
            });

answered Apr 12, 2017 at 11:01

Balasubramanian

7188 silver badges27 bronze badges

2 Comments

Tidya Over a year ago

I tried with JSON.stringify but still same issues.. I have updated the code, please read through the comments and suggest an answer.. Thanks

Balasubramanian Over a year ago

How about Request Mapping?. will it hit the API or throwing not found exception?

Collectives™ on Stack Overflow

AngularJS http POST using form not working

2 Answers 2

8 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related