Submitting a form to a new window

If you want to open the result of a form submission in to a new window you can without having to go via the server. This is how you would do it using Javascript.

Say we have a form like the following:

<form class="windowForm" action="/your/post/page" method="post">
	<input  type="text" name="name"
			value="Dave Taylor" />
	<input type="submit" value="Send" />
</form>

Ordinarily when submitted this will send the current page to the action location of the form. However there are times when you might want to post the form in to a new window are an iframe within the page (say inside a dialog).

Dynamically open a new window and attach it as the forms target

The way you would do this is to set the target attribute of the form to match the name of the iframe or window. Here is the MDN window.open specification.

$('.windowForm').submit(function(e){
	// specify a unique target name
	var target = 'windowFormTarget';

	// open a new window and name it
	window.open('', target, 'width=500,height=300');

	// set the target of the form to be
	// the window name
	this.setAttribute('target', target);

	// allow the form to be submitted normally
});

And that’s pretty much it. The target attribute of a form is a little less well known than the target attribute on a link.

Here’s the code on jsBin

Work with me

Dave is a cohesive team member, widely popular with his colleagues and always inspiring quality, exploration and innovation. One of the true ‘greats’ we’ve had the pleasure to work with

I believe in community, in inspiration and creativity. I believe it's an inspired team and a laser focus on the user's experiece that will produce the best results. I want to help frontend teams live inspired, be productive and scale better.