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.

Ferial

Answer 1

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..

Vagina

I've tried this, but it won't make it look like button?! jsfiddle.net/6v4q2 – Ferial

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 ;) – Vagina

Aah, that dot in front of the button value in css. Now it's working :) – Ferial

i edit it so also looks more like a btn while hover and press – Vagina

@jycr753 formtarget="_blank" – Moonwort

@Moonwort 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" – Vagina

That's a HTML5 tag. Not supported in all major browsers. – Hemocyte

@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 – Vagina

Answer 2

use formtarget="_blank" its working for me

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

Browser compatibility: from caniuse.com
IE: 10+ | Edge: 12+ | Firefox: 4+ | Chrome: 15+ | Safari/iOS: 5.1+ | Android: 4+

Moonwort

Make sure you tell people this HTML5 tag: w3schools.com/tags/att_button_formtarget.asp – Hemocyte

Unfortunately the provided link states that The formtarget attribute is only used for buttons with type="submit". It doesn't work for me. – Orjonikidze

Answer 3

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>

Mcgrody

This should actually have been accepted as the right answer – Melodee

Answer 4

The correct answer:

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

Supported in all major browsers :)

Hemocyte

Tested it in IE7+, Chrome, FF, and Safari – Hemocyte

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? – Keynote

Answer 5

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.

Orjonikidze

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 – Muss

Answer 6

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>

Perverse

Answer 7

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

Scientific

Answer 8

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.

Manriquez

Answer 9

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>

Metallophone

Answer 10

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

Jedthus

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. – Potbellied

Answer 11

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')"

Waldenburg

Answer 12

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

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

Cerebellum

Answer 13

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/

Ponce

Answer 14

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>

Nicholas

No, you can't. HTML doesn't allow links inside buttons (or vice versa). Depending on browser error recovery is not recommended. – Erivan

A better approach is to replace the button with a link … like the accepted answer from a decade ago says to do. – Erivan

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 – Nicholas

"idk about you but its working for me" — I repeat: Depending on browser error recovery is not recommended. – Erivan

"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 – Erivan