AngularJS - Run and wait for an asynchronous function before form submit action

Question

I'm tying to run a angular function before the user is posted to the payment provider. The form to the payment provider looks like this:

<form action="UrlToPaymentProvider" method="POST">
   <input type="hidden" name="formKeys />
   <input type="submit" />
</form>

AngularJS controller file:

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     $http.post("/my url", {
         orderKey: $scope.model.Order.Key,
     });
}

I can see that my log outputs the value but the post is not. I've debugged and the post works if I remove action="UrlToPaymentProvider" method="POST" on the form element.

If I get your right, your form should be submited by the default browser synchronous behavior but you also want to send a XHR request before the sync. request is send? — lin, Mar 02 '17 at 09:04
Hi lin, yes exactly, if that's possible. Or if I can run the angular function async. I tried ng-click on the button but it didn't trigger the post — user943369, Mar 02 '17 at 09:22

lin · Accepted Answer · 2017-03-02T10:22:26.037

I understand that you try to mix a sync & async call on form submit. You can mix a synchronous form send with an AngularJS function like in this demo fiddle. The default form submit is prevented by e.preventDefault(); once your XHR request was finished the form will get submited by native JavaScript document.getElementById("myForm").submit();.

View

<div ng-controller="MyCtrl">
  <form method="post" ng-submit="send($event)" action="someURL" id="myForm">
    <input type="hidden" name="formKeys">
    <input type="submit">
  </form>
</div>

AngularJS application

var myApp = angular.module('myApp',[]);

myApp.controller('MyCtrl', function ($scope, $http) {

    $scope.send = function (e) {

      //prevent default form send
      e.preventDefault();

      //example request
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then(function(response) {
         //manually submit your form once your async. logic has been procceded.
         document.getElementById("myForm").submit();
      });
    };
});

score 0 · Answer 2 · answered Mar 02 '17 at 09:06

0

You can try something like this :

<form ng-submit="send()" >
    <input />
    ....
</form>

and in controller :

$scope.send = function() {

     //your custom function here

     $http.post('urlToPost', $scope.myProfile)
     .success(function(data, status, headers, config) {
        console.log("getting success status")
     })
     .error(function(data, status, headers, config) {
        console.log("getting error status")
     });
 }

answered Mar 02 '17 at 09:06

Padi

711
9
18

I don't think that this is what the user wants to do – lin Mar 02 '17 at 09:07
Hi, thank you for your reply but that's not what I want to do, the user has to get redirected to the payment provider to enter credit card information. – user943369 Mar 02 '17 at 09:16
and you need to update some info about the client before he gets the payment interface ?? – Padi Mar 02 '17 at 09:18
If you want to check something before post sensible data to payment provider is better to do that when you enter in controller or before the user will press the post button ... I suppose that all inputs from form are hidden and all values are coming from backend ... am I right ? – Padi Mar 02 '17 at 09:26

score 0 · Answer 3 · answered Mar 02 '17 at 09:06

Instead of using form action you can use ng-submit.

<form name="myForm" ng-submit="memberRedirectedToPaymentProvider()">
<input type="hidden" name="formKeys />
...

<input type="submit" />
</form>

For making an AJAX POST call you can use angular $http service with post method.

$scope.memberRedirectedToPaymentProvider = function () {
     console.log("Member is redirected");
     var url = "/myurl";
     var data = {
         orderKey: $scope.model.Order.Key
     };
     $http.post("/myurl", data).success(function(data, status) {
            $scope.response = data;
     })
}

AngularJS - Run and wait for an asynchronous function before form submit action

3 Answers3

View

AngularJS application