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.
Comments
Be Heard!
Share your thoughts without being a jerk! And wrap your code in <code> tags, f00!
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
$(‘a[rel="external"]‘).click( function() {
window.open( $(this).attr(‘href’) );
return false;
});
Yeah, I would also do something like:
function submitForm(formId) {
newDialog = window.open(‘about:blank’, “_form”);
document.forms[formId].target=’_form’;
document.forms[formId].submit();
return false;
}
<form id=”loginform” action=”#” method=”post” onsubmit=”return submitForm(this)”></form>
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
$(’a[rel="external"]‘).click( function() {
window.open( $(this).attr(’href’) );
return false;
});
form action=”http://othersite.com” method=”post” rel=”external”
<– form fields here –>
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
html:
... form fields ...
Javascript:
function sendme()
{
window.open("","myNewWin","width=500,height=300,toolbar=0");
var a = window.setTimeout("document.form1.submit();",500);
}