Input button target="_blank" isn't causing the link to load in a new window/tab

Question

I have an HTML file with an input button. This is only an example button, but it's including all necessary info of code:

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" target="_blank">

For some reason, it's not loading in a new window/tab.

score 54 · Answer 1 · edited Jun 26 '17 at 12:32

54

use formtarget="_blank" its working for me

<input type="button" onClick="parent.location='http://www.facebook.com/'" value="facebook" formtarget="_blank">

edited Jun 26 '17 at 12:32

David Rodrigues

12,041
16
62
90

answered Jan 09 '14 at 12:56

mans

1,087
4
26
44

3

Make sure you tell people this HTML5 tag: http://www.w3schools.com/tags/att_button_formtarget.asp – Davis May 06 '14 at 13:17
2

Unfortunately the provided link states that _The formtarget attribute is only used for buttons with type="submit"_. It doesn't work for me. – Gianluca Greco May 05 '16 at 08:45

Jorge Y. C. Rodriguez · Accepted Answer · 2013-06-20T07:52:05.030

22

you will need to do it like this...

<a type="button" href="http://www.facebook.com/" value="facebook" target="_blank" class="button"></a>

and add the basic css if you want it to look like a btn.. like this

    .button {
    width:100px;
    height:50px;
    -moz-box-shadow:inset 0 1px 0 0 #fff;
    -webkit-box-shadow:inset 0 1px 0 0 #fff;
    box-shadow:inset 0 1px 0 0 #fff;
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ffffff), color-stop(1, #d1d1d1) );
    background:-moz-linear-gradient( center top, #ffffff 5%, #d1d1d1 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d1d1d1');
    background-color:#fff;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    border-radius:6px;
    border:1px solid #dcdcdc;
    display:inline-block;
    color:#777;
    font-family:Helvetica;
    font-size:15px;
    font-weight:700;
    padding:6px 24px;
    text-decoration:none;
    text-shadow:1px 1px 0 #fff
}



  .button:hover {
    background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #d1d1d1), color-stop(1, #ffffff) );
    background:-moz-linear-gradient( center top, #d1d1d1 5%, #ffffff 100% );
 filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d1d1d1', endColorstr='#ffffff');
    background-color:#d1d1d1
}
.button:active {
    position:relative;
    top:1px
}

target works only with href tags..

edited Jun 20 '13 at 07:52

answered Jun 20 '13 at 07:19

Jorge Y. C. Rodriguez

3,394
5
38
61

I've tried this, but it won't make it look like button?! http://jsfiddle.net/6v4q2/ – Teemu Laine Jun 20 '13 at 07:32
here is sample and it does works. you have to add the effect to make push effect, i can provided just in 10 min two ;) – Jorge Y. C. Rodriguez Jun 20 '13 at 07:35
Aah, that dot in front of the button value in css. Now it's working :) – Teemu Laine Jun 20 '13 at 07:41
i edit it so also looks more like a btn while hover and press – Jorge Y. C. Rodriguez Jun 20 '13 at 07:52
1

@jycr753 formtarget="_blank" – mans Jan 09 '14 at 12:57
@mans Where do you have the reference for that att? I cant it and as I far i cant remember i have never seen something call "formtarget" – Jorge Y. C. Rodriguez Jan 09 '14 at 13:35
That's a HTML5 tag. Not supported in all major browsers. – Davis May 06 '14 at 13:21
@user952851 that is basic html, if you are talking about CSS3, that is another thing, but again it is supported by all major browsers, and for those that have IE8 there is a small fallback `filter:progid:` so they can have some small experience.. if they want the real experience they should get a real browser – Jorge Y. C. Rodriguez May 06 '14 at 15:02

score 17 · Answer 3 · answered Nov 30 '18 at 11:09

17

Just use the javascript window.open function with the second parameter at "_blank"

<button onClick="javascript:window.open('http://www.facebook.com', '_blank');">facebook</button>

answered Nov 30 '18 at 11:09

Laurent

469
3
7

1

This should actually have been accepted as the right answer – Engr Atiq Jun 04 '22 at 17:49

score 15 · Answer 4 · answered May 06 '14 at 13:20

15

The correct answer:

<form role="search" method="get" action="" target="_blank"></form>

Supported in all major browsers :)

answered May 06 '14 at 13:20

Davis

2,937
3
18
28

2

Tested it in IE7+, Chrome, FF, and Safari – Davis May 06 '14 at 13:23
Sometimes somebody wants some buttons (hyperlinks) to open in a new window, but not others. This is all-or-nothing for all hyperlink-buttons, correct? – FloverOwe Mar 09 '22 at 01:19

score 6 · Answer 5 · answered May 05 '16 at 09:57

6

Facing a similar problem, I solved it this way:

<a href="http://www.google.com/" target="_top" style="text-decoration:none"><button id="back">Back</button></a>

Change _top with _blank if this is what you need.

answered May 05 '16 at 09:57

Gianluca Greco

146
2
3

Thanks for that, i had the same problem with wicket that it couldnt get the right class (like a button) for the href , and this answer solved my problem – Thomas Sofras Sep 22 '16 at 08:42

score 4 · Answer 6 · answered Mar 14 '17 at 13:41

Please try this it's working for me

onClick="window.open('http://www.facebook.com/','facebook')"

<button type="button" class="btn btn-default btn-social" onClick="window.open('http://www.facebook.com/','facebook')">
          <i class="fa fa-facebook" aria-hidden="true"></i>
</button>

score 3 · Answer 7 · answered Jun 20 '13 at 07:15

3

target isn't valid on an input element.

In this case, though, your redirection is done by Javascript, so you could have your script open up a new window.

answered Jun 20 '13 at 07:15

score 3 · Answer 8 · answered Jun 27 '16 at 12:50

The formtarget attribute is only used for buttons with type="submit".

That is from this reference.

Here is an answer using JavaScript:

<input type="button" onClick="openNewTab()" value="facebook">

<script type="text/javascript">
    function openNewTab() {
        window.open("http://www.facebook.com/");
    }
</script>

score 2 · Answer 9 · answered Jun 20 '13 at 07:10

2

An input element does not support the target attribute. The target attribute is for a tags and that is where it should be used.

answered Jun 20 '13 at 07:10

MaVRoSCy

17,747
15
82
125

score 2 · Answer 10 · answered Aug 26 '16 at 14:31

2

<form target="_blank">
    <button class="btn btn-primary" formaction="http://www.google.com">Google</button>
</form>

answered Aug 26 '16 at 14:31

JoshYates1980

3,476
2
36
57

This answer turned up in the low quality review queue, presumably because you don't provide any explanation of the code. If this code answers the question, consider adding adding some text explaining the code in your answer. This way, you are far more likely to get more upvotes — and help the questioner learn something new. – lmo Aug 27 '16 at 16:31

score 1 · Answer 11 · edited Mar 15 '17 at 05:43

1

Instead of

onClick="parent.location='http://www.facebook.com/'"

try using

onClick="window.open='http://www.facebook.com/'" onClick="window.open('http://www.facebook.com/','facebook')"

edited Mar 15 '17 at 05:43

Community

1
1

answered Oct 21 '13 at 05:43

nick

11
1

score 0 · Answer 12 · answered Feb 19 '21 at 11:30

0

In a similar use case, this worked for me...

<button onclick="window.open('https://www.w3.org/', '_blank');">  My Button </button>

answered Feb 19 '21 at 11:30

Damir Dautovic

29
4

score -1 · Answer 13 · edited Nov 10 '16 at 20:03

Another solution, using JQUERY, would be to write a function that is invoked when the user clicks the button. This function creates a new <A> element, with target='blank', appends this to the document, 'clicks' it then removes it.

So as far as the user is concerned, they clicked a button, but behind the scenes, an <A> element with target='_blank' was clicked.

<input type="button" id='myButton' value="facebook">

$(document).on('ready', function(){
     $('#myButton').on('click',function(){
         var link = document.createElement("a");
         link.href = 'http://www.facebook.com/';
         link.style = "visibility:hidden";
         link.target = "_blank";
         document.body.appendChild(link);
         link.click();
         document.body.removeChild(link); 
     });
});

JsFiddle : https://jsfiddle.net/ragDaniel/tf991u4g/2/

score -2 · Answer 14 · answered Feb 19 '23 at 18:34

-2

You Can Put it inside an anchor tag

     <button>
        <a href="{{route('main.home')}}" class="btn header-item noti-icon waves-effect" target="_blank"><i class="bx bxs-home"></i></a>
     </button>

answered Feb 19 '23 at 18:34

Murtaza Noori

31
4

No, you can't. HTML doesn't allow links inside buttons (or vice versa). Depending on browser error recovery is not recommended. – Quentin Feb 19 '23 at 18:36
A better approach is to replace the button with a link … like the accepted answer from a decade ago says to do. – Quentin Feb 19 '23 at 18:37
idk about you but its working for me , and ive been using this method for awhile now , it works fine , you can also use onclick function inside your link aswell , but this method is much simpler – Murtaza Noori Feb 20 '23 at 09:39
"idk about you but its working for me" — I repeat: Depending on browser error recovery is not recommended. – Quentin Feb 20 '23 at 11:41
"you can also use onclick function inside your link aswell" — The suggestion on the accepted answer, that is referenced, is to use a link **without** `onclick` – Quentin Feb 20 '23 at 11:42

Input button target="_blank" isn't causing the link to load in a new window/tab

14 Answers14

Linked