Dynamic action in HTML form with POST method

Question

My webapp must redirect the user to another website on which I have no control. This website expect to receive a few POST parameters from the user.

Without angular, I would have to redirect the user using a form like this :

<FORM METHOD="POST" ACTION="https://otherwebsite.com/index.php"> 
  <INPUT TYPE="HIDDEN" NAME="id" VALUE="A1S2D3"> 
  <INPUT TYPE="hidden" NAME="number" VALUE="1234567"> 
  <INPUT TYPE="SUBMIT" NAME="SUBMIT" VALUE="Submit"> 
</FORM>

In angular, this would also work, but I want the action url and the value of "number" to come from angular's scope.

Sadly, it doesn't seems to work when I use ng-model or {{var}} in the value/action attributes.

Any idea to redirect the user to the other website with POSTed parameters from the scope?

Is the post already working properly without using JavaScript? — BrightIntelDusk, Mar 10 '14 at 19:13
If I manually set the action and the value of the input in the html page, it works. I want to have a similar result in an angularjs app with dynamic values. I'm not sure it is possible with angular, but there must be a dirty way of doing it (injecting a form from JS into the DOM and submitting it for example)... — Galdo, Mar 10 '14 at 19:17
possible duplicate of [how to use javascript change the form action](http://stackoverflow.com/questions/5361751/how-to-use-javascript-change-the-form-action) — NicolasMoise, Mar 10 '14 at 19:18
As you said I don't think this is possible with just Angular, bu might be doable with pure JS. — NicolasMoise, Mar 10 '14 at 19:19
Nicolas, I think this other question is a valid way of doing it, but it is not a duplicate since there might be a way to do it in angular without pure js hacks. — Galdo, Mar 10 '14 at 19:21
Answered same question in a similar topic: http://stackoverflow.com/a/37408404/2244262 — Stalinko, May 24 '16 at 08:40

score 4 · Accepted Answer · answered Mar 10 '14 at 19:33

Here I have found a simple a way of using it that (kinda uses) Angular.

I have an angular function

$scope.setAction= function(){
    document.myForm.action='http://anothersite.com';
};

where myForm is the name attribute of your form.

<form action="http://asamplesite.com" method="POST" name="myForm">

See my fiddle. http://jsfiddle.net/nicolasmoise/f6R9x/

Note this kinda goes against the "Angular Way" because in your view, you have no way of seeing that logic, it's kinda hidden inside the controller. However, as it was stated in the question I linked to, Angular doesn't like submitting form the old ways. An alternative could be having the form call a function through ng-submit that gets your dynamic url and does the redirecting/reloading (using $location maybe). That way might be longer but at least your logic will be more evident in your view.

score 0 · Answer 2 · answered Mar 10 '14 at 19:35

Use the directive for ngSubmit which allows you to call a method to submit a form. According to the documentation if the form contains action, data-action, or x-action attributes then it will perform the default form action. Which for a form means sending the request to the server and reloading the current page.

  <script>
    function Ctrl($scope) {
      $scope.number = "1234567";
      $scope.id = "A1S2D3";
    }
  </script>

  <form ng-submit ng-controller="Ctrl" data-action="https://otherwebsite.com/index.php">
    <INPUT TYPE="HIDDEN" NAME="id" ng-model="id">
    <INPUT TYPE="hidden" NAME="number" ng-model="number">
    <input type="submit" id="submit" value="Submit" />
  </form>

This doesn't work. The input binded with ng-model have no value in the post request and the action is not bindable. — Galdo, Mar 10 '14 at 19:56
Yes it's very interesting I was working on testing it and ran into [the following error](http://docs.angularjs.org/error/$sce/insecurl?p0=https:%2F%2Fotherwebsite.com%2Findex.php). — BrightIntelDusk, Mar 10 '14 at 23:18

score 0 · Answer 3 · answered Aug 14 '15 at 07:59

0

I had the same problem with hidden inputs(seems like angular are ignoring them).

I used this solution:

<INPUT TYPE="text" NAME="number" ng-model="myNumber" hidden>

answered Aug 14 '15 at 07:59

Silviu Cătărău

1
1

Dynamic action in HTML form with POST method

3 Answers3