Submit a Form to a New Window
There are certain times when it's important to open a link in a new window. The short and effective way of achieving that is adding the 'target="_blank"' attribute/value to your anchor tag. But what about when you want form submission to have the same effect -- a new window? Luckily, you can do the same thing:
The XHTML
<form action="http://othersite.com" method="post" target="_blank">
<-- form fields here -->
</form>
Of course, the Target-Blank haters may not approve of this method, but it's quick and always works.
Google Plus provides loads of inspiration for front-end developers, especially when it comes to the CSS and JavaScript wonders they create. Last year I duplicated their incredible PhotoStack effect with both MooTools and pure CSS; this time I'm going to duplicate...
If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium. The experience has been great: using JavaScript to create easy to write, easy to test, native mobile apps has been fun. My...
UPDATE: The jQuery website was down today which caused some issues with my example. I've made everything local and now the example works.
Earlier this week, I posted a MooTools script that faded links to and from a color during the mouseover and mouseout events.
Iv never need to do this, and actually never really thought about it, but im glad to see that, that would work if i ever needed to do it :D Cheers David.
I’m afraid that I’m a Target-Blank hater, but fortunately, not so hardcore that I refuse to use it when it’s the only thing that works. I wasn’t aware that you could do it with forms, will add that to my arsenal, thanks David!
A word of warning: target is not a valid attribute in XHTML.
So while it works, it isn’t specified in the standard anymore.
@Rexxars – that’s why I’m against it
What about making something like this and adding it to the form:
this is JQuery
Yeah, I would also do something like:
I didn’t test it at the moment, but I guess it should work ;)
Doh, no idea why, but my post didn’t work :( Anyway, I would try something like that: http://nopaste.ch/62b4538ef17e6da.html – but I didn’t test it, yet…
@All: I understand that “target” is no longer considered valid, but it’s short and effective. It also works when the user has JS disabled.
@Rich: I don’t know if it’s possible to apply that to an external window.
Maybe i wasn’t clear in my comment, but your saying something like this would not work?
@david
obviously placing the jquery code in the dom. and i removed the open and close from that form tag because it wasnt showing up in the preview.
@Rich: Yep, I know where you’re going with that, but I’m not sure if the javascript will pass the POST form information on.
excellent timing; i needed this at work today. cheers!
I know that target isnt valid anymore, but can someone educate me as to what i would use instead? and maybe i could join the darkside too?
@david gotcha. i think your right. I just tried it a couple of different ways with no results. could be something interesting to think about though. although i only tried for about 10 min..lol
Good post though.
That’s a cool trick. I’m a little bit of a fledgling at website development and tried to use target=”blank” and I was pretty damn happy to find out that all I needed was an underscore! Thanks alot David!
Try this: onsubmit=”this.target=’_blank'”
A JQuery wich tests “rel” attribute will fail in validation too, because this attribute isn’t on the list for the element “form”: http://www.w3.org/TR/html401/interact/forms.html#h-17.3
Must be a way to assign the target to a class using JQuery.
Hope it helps
I want a smaller new window instead of opening a new tab,
so I’ve used this for a website, the only problem is that it doesn’t seem to work in IE 9
Javascript:
It worked for me. My WP theme was sent back as I was not using
_blank
target. Thanks for sharing.I can’t make it work with Safari on macOS.
I am submitting through javascript though:
$(someformselector).submit();