Form Submission Opens New Tab/Window

You probably knew that you could force a link into opening a new tab or window with the target="_blank" attribute (deprecated, but universally still supported).

<a href="#" target="_blank">link</a>

But you can use the same exact attribute on forms to get the same result:

<form action="#" method="post" target="_blank">
    ...
</form>

Comments

  1. User Avatar
    Kartlos Tchavelachvili
    Permalink to comment#

    Nice share! so target becomes the action=”url.html”.

  2. User Avatar
    Bradley Rosenfeld
    Permalink to comment#

    And I used to use java script to do this :O Thanks for sharing

  3. User Avatar
    Bob
    Permalink to comment#

    A nice feature, but unfortunately, the target attribute has been deprecated.

    http://www.w3schools.com/tags/att_form_target.asp

  4. User Avatar
    dan
    Permalink to comment#

    so if it is deprecated, what would be the alternative to open a form in a new window?

  5. User Avatar
    Peter Hanley
    Permalink to comment#

    Unfortunately, this is not totally ‘universally supported’ – it seems like if you try to have multiple forms doing this on one page (in a data grid, for example) – submitting one form kills the others so you get nothing on click (so far confirmed on latest webkit (safari 5.1, chrome 13), but the trick still works with Firefox 6)

    So if you’re using this on a site with multiple forms, you may wish to take a look at alternatives.

  6. User Avatar
    Peter Hanley
    Permalink to comment#

    Of course after being all doom & gloom I found the solution – each form must have a unique id attribute in order for this to work in Safari:

    This doesn’t work:

    <form action="#" method="post" target="_blank">
    <input type="submit">
    </form>
    <hr>
    Then this: 
    <form action="#" method="post" target="_blank">
    <input type="submit">
    </form>

    but this does:

    Click this: 
    <form id="form1" action="#" method="post" target="_blank">
         <input type="submit">
    </form>
    <hr>
    
    Then this: 
    
    <form id="form2" action="#" method="post" target="_blank">
         <input type="submit">
    </form>
  7. User Avatar
    Jeff
    Permalink to comment#

    So, can someone elaborate… I need a form with a drop down box with the names of some web pages. Choosing a web page and clicking submit should open to that page (in a new tab). How is this done?

    • User Avatar
      Jeff
      Permalink to comment#

      I’ve found the solution I need at stackoverflow.com. The issue got convoluted because I didn’t want to use a regular submit button, as I would have had to create new styles, but already had existing styles for an anchor tag that emulated a button. You can see it in action here: YourBeliefsMatter.com. Anyway, thanks for the post. It was helpful!!

  8. User Avatar
    MIB

    Thanks a lot, Great share.

  9. User Avatar
    pankaj

    I have problem..
    In my page there is table and number of rows increases the top-margin of table also increases..

  10. User Avatar
    raj
    Permalink to comment#

    nice ans it worked for me .
    thanks !!!

  11. User Avatar
    Stephen
    Permalink to comment#

    very helpful, thank you :)

  12. User Avatar
    Akshay
    Permalink to comment#

    How to set the title for the new tab/window?

Submit a Comment

Posting Code

You may write comments in Markdown. This makes code easy to post, as you can write inline code like `<div>this</div>` or multiline blocks of code in triple backtick fences (```) with double new lines before and after.

Code of Conduct

Absolutely anyone is welcome to submit a comment here. But not all comments will be posted. Think of it like writing a letter to the editor. All submitted comments will be read, but not all published. Published comments will be on-topic, helpful, and further the discussion or debate.

Want to tell us something privately?

Feel free to use our contact form. That's a great place to let us know about typos or anything off-topic.

icon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag