Submitting form containing using POST in AngularJS

Question

For the first time I have oi submit a form in AngularJS using POST Http Request, in particular this form contains a keygen element that generates a key as follows:

<keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden>

The spkac element gets to the server always empty, plus I think I am not passing the data from the form to the POST in the correct way, so my questions are:

How to set spkac as parameter part of the form?
Is this the correct way to pass the data to the POST in AngularJS?

EDIT Form:

    <form name="signupForm" id="signupForm" method="POST" ng-submit="create()">
                <input type="hidden" name="username" id="username" value="mtest">
                <input type="text" placeholder="Account name" name="webid" ng-model="account.webid" ng-focus="isFocused" ng-blur="isFocused = false"><br>
                <input type="text" placeholder="Full name" name="name" ng-model="account.name"><br>
                <input type="text" placeholder="Email" name="email" ng-model="account.email"><br>
                <input type="text" placeholder="Picture URL" name="pictureURL" ng-model="account.pictureURL"><br>

                <keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden>

                <input type="submit" id="submit" value="Submit">
            </form>

EDIT HTTP Request:

$scope.signupForm = {};
$scope.create = function () {
        document.getElementById("submit").value = "Creating...";
        var uri = "https://" + "...";
        //setting spkac part of the form's parameters
        $scope.account.spkac = document.getElementById("spkac");

        $http({
          method: 'POST', 
          url: uri,
          data: $.param($scope.account),
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'Accept': 'application/x-x509-user-cert'
          },
          withCredentials: true
        }).
        success(function(data, status, headers) {
          if (status == 200 || status == 201) {
              //Account created 
          }
        }).

EDIT 2

score 0 · Answer 1 · answered Dec 09 '15 at 07:21

0

Do not pass the entire form as data to post request. Instead you should pass the models associated with the field to data config of post request.

data : $.param({
  webid : webid,
  name : name,
  email : email
  ...
})

Since the Content-Type is application/x-www-form-urlencoded. You will get all the model values as form parameters in your back-end service.

answered Dec 09 '15 at 07:21

Vivek

11,938
19
92
127

I have edited the parameters to be attributes of an account object (check EDIT sections). Now, is passing the object this way the same thing as you suggested? $.param($scope.account) – mzereba Dec 09 '15 at 08:21
Still having the REST Resource receiving @Consumes("application/x-www-form-urlencoded")? – mzereba Dec 09 '15 at 09:09
It gives me error on the ":" and doesn't accept the format from the fist place – mzereba Dec 09 '15 at 09:12
Now tried your format (bulding the object in the data filed instead) it gives teh same result: which is the browser crashes! – mzereba Dec 09 '15 at 09:15
Sorry, try **$.param({account : $scope.account})** – Vivek Dec 09 '15 at 09:17
Building it (as you suggested in the answer) or having the account object (like your suggestion in the last comment) both kinda crashed the request, more precisly it happens like the screen shot (check EDIT 2). – mzereba Dec 09 '15 at 09:24
Remove 1st & 4th line from create function. It is not necessary at all. – Vivek Dec 09 '15 at 09:34
The spkac deosn't appear in the account object, so I am forcing it. – mzereba Dec 09 '15 at 09:35
If I remove it it deosn't act weired anymroe. But I get this: "Failed 500 Your request could not be processed. Either no WebID or no SPKAC value was provided". – mzereba Dec 09 '15 at 09:37

score 0 · Answer 2 · answered Dec 10 '15 at 10:26

Solved!

So preparing an HTTP Request to do that doesn't work for some reason. Instead the form action needs to be set and form submitted straight away in order to send the keygen with it. Here the solution:

in the Template the action is parametrical:

    <form name="signupForm" id="signupForm" method="POST" action="{{actionUrl}}">
     ...
    <input type="submit" id="btnSubmit" value="Submit" ng-click="completeForm()">

and the Controller sets the action and submits the form as follows:

$scope.completeForm = function () {
        $scope.actionUrl = "https://" + document.getElementById("username").value + "...";
        document.getElementById("signupForm").submit();     
};

Submitting form containing using POST in AngularJS

2 Answers2