Check out our new training course on AngularJS for Flex Developers

Submit a Form Post to a New Window with AngularJS - Approach 2

I was working on a client project, built with AngularJS, and we wanted to use AngularJS to submit a form into another window. This could be done with a simple target on the form tag; but we wanted to be able to run other functionality at the time of the form post.

I decided to write a series about the different ways to make this happen; and this is the second in the series. Check out the first.

The Setup

First, add Angular to your Application:


<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

Unfortunately, for this approach we'll need JQuery too:


<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>

Then, create an Angular Module and controller:


angular.module('test',[]);
angular.module('test').controller('someController',['$scope', function($scope){
}]);

The $scope service is injected into the controller. It is used to share data between the view and the controller.

That is all the required setup.

Open the new page

First, I want to create the form that will be submitted. This is a hidden form with no visual elements:


<form method="post" action="https://www.jeffryhouser.com" id="myForm" target="myNewWindow">
</form>

An ID is specified, and we'll use this to get a hook to the form inside the angular code. Target is specified, and tells the form to submit to the window named 'myNewWindow'. The form action will post go back to my blog--however you could post it anywhere you want, even passing variables for processing.

Add a button to trigger the form, which will open the link in the new window:


<button ng-click="onButtonClick()" >Open Link Form</button>

Back to the JavaScript, this method will open a new page:


$scope.onButtonClick = function(){
var form = angular.element('#myForm')
form.submit();
}

A function named onButtonClick() is saved to the $scope. Inside the button, the angular.element is used to get a handle to the form based on the form's ID. This uses JQuery under the hood, but did not work w/ the JQuery lite that is part of AngularJS, so that is why we had to use the full Jquery library earlier.

Once we get a handle to the form, just submit it.

Now add some HTML:

Load the app and you'll see something like this:

A boring UI; but click the button:

A new tab will open with the form submit; in this case opening my blog:

Play with the code here.

What is Next?

The next entry in this series will show you how to handle links that open inside an asynchronous call. By default browsers won't let you open new windows without user interaction; and that interaction has passed by the time the call is complete. I discovered a workaround, which I'll share.

Comments (Comment Moderation is enabled. Your comment will not appear until approved.)
All Content Copyright 2005, 2006, 2007, 2008, 2009 Jeffry Houser. May not be reused without permission
BlogCFC was created by Raymond Camden. This blog is running version 5.9.2.002.