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.
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..
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.
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>
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')"
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>
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.
An input
element does not support the target
attribute. The target
attribute is for a
tags and that is where it should be used.
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>
The correct answer:
<form role="search" method="get" action="" target="_blank"></form>
Supported in all major browsers :)
<form target="_blank">
<button class="btn btn-primary" formaction="http://www.google.com">Google</button>
</form>
In a similar use case, this worked for me...
<button onclick="window.open('https://www.w3.org/', '_blank');"> My Button </button>
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+
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/
Source: Stackoverflow.com