Executing AngularJS - Ensuring an asynchronous function completes before submitting a form

Question

Executing AngularJS - Ensuring an asynchronous function completes before submitting a form

I am trying to execute an angular function before the user is directed to the payment provider. The form for the payment provider appears as follows:

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

Here is the AngularJS controller file:

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

Although my console log displays the value, the post request does not seem to work. Upon debugging, I discovered that the post request works if I remove

action="UrlToPaymentProvider" method="POST"

from the form element.

javascript angularjs post form-submit ng-submit

Answer 1

Answer №1

Attempting to combine synchronous and asynchronous calls during form submission can be tricky. You can achieve this by incorporating an AngularJS function, as demonstrated in this interactive example. By using e.preventDefault();, the default form submission is prevented until your XHR request is completed, at which point the form will be submitted using native JavaScript with

document.getElementById("myForm").submit();

.

Implementation Example

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

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

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

    $scope.send = function (e) {

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

      //sample request
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then(function(response) {
         //trigger form submission after async operations are completed
         document.getElementById("myForm").submit();
      });
    };
});

Answer 2

Attempting to combine synchronous and asynchronous calls during form submission can be tricky. You can achieve this by incorporating an AngularJS function, as demonstrated in this interactive example. By using e.preventDefault();, the default form submission is prevented until your XHR request is completed, at which point the form will be submitted using native JavaScript with

document.getElementById("myForm").submit();

.

Implementation Example

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

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

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

    $scope.send = function (e) {

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

      //sample request
      $http({
        method: 'GET',
        url: 'https://jsonplaceholder.typicode.com/posts'
      }).then(function(response) {
         //trigger form submission after async operations are completed
         document.getElementById("myForm").submit();
      });
    };
});

Answer 3

Answer №2

You might want to consider implementing something along these lines:

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

and within the controller :

$scope.submitForm = function() {

     //execute your custom logic here

     $http.post('urlToPost', $scope.formData)
     .success(function(data, status, headers, config) {
        console.log("Successful response received")
     })
     .error(function(data, status, headers, config) {
        console.log("Error in response received")
     });
 }

Answer 4

You might want to consider implementing something along these lines:

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

and within the controller :

$scope.submitForm = function() {

     //execute your custom logic here

     $http.post('urlToPost', $scope.formData)
     .success(function(data, status, headers, config) {
        console.log("Successful response received")
     })
     .error(function(data, status, headers, config) {
        console.log("Error in response received")
     });
 }

Answer 5

Answer №3

Instead of utilizing the action attribute in a form, you have the option to use ng-submit.

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

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

To initiate an AJAX POST request, you can employ the angular $http service and its post method.

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

Answer 6

Instead of utilizing the action attribute in a form, you have the option to use ng-submit.

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

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

To initiate an AJAX POST request, you can employ the angular $http service and its post method.

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

Executing AngularJS - Ensuring an asynchronous function completes before submitting a form

Answer №1

Implementation Example

AngularJS Setup

Answer №2

Answer №3

Similar questions

How to selectively import specific modules in three.js using ES6 syntax

Configuring a Themeforest HTML template with Vue and Laravel. Issue encountered when attempting to load JS files using router.push

Struggles with integrating a disappearing navigation bar when scrolling - JavaScript

The onselect attribute within the HTML <option></option> element allows you to trigger an event when a user selects an

Creating a State in Typescript Vuex with Accessors: A Step-by-Step Guide

Looking to $post the content of a text field, rather than the selected option from a dropdown menu

The State in the useEffect hook does not update instantly

Potential null object in React/TypeScript

Formatting DateTime in Angular from an API

The JQuery function .html() fails to include all the HTML content retrieved from a JSON response

Incorporating JavaScript and CSS files into a content page of a master page in ASP.NET: Steps to follow

Unusual outcome observed when inputting a random number into HTML using JavaScript

React-Query will not automatically refetch data on mount when using an invalidated query

Leveraging the Power of CSS in Your Express Applications

"Placing geotags on the map for every individual location on Google Maps

Animate the CSS when the content is within the viewport using pagepiling.js integration

Activate search bar by clicking on it

Using ASP.NET Server Controls to Toggle Textbox Visibility Based on Dropdown Selection

Error: The variable "$this" has not been defined in the AJAX function

Learn how to create a button that will only submit a value when clicked using Node.js and EJS