How to open new html page on button click in javascript
Hello Everyone, today I am going to share how do you open a new page after clicking html button in javascript ? Suppose you want to link a button to another page in HTML . Then you can use this method.
Example 1 :- Using window.open() method
The open() method is a pre-defined window method of JavaScript used to open the new window or tab in the browser.
For Example, I'm going to open "https://www.google.com" in a new tab.
Demo using open() method <button onclick=" myFunc()"> open in a new tab</button>
<script>
function myFunc(){
window.open("https://www.google.com");
}
</script>
Try it Yourself »
You can use it in one link of code .
<button onclick="window.open("https://www.google.com");">open tab</button>
By default,the open() method opens a new tab. Learn how to open new html page on button click in same window.
Onclick open url in same window <button onclick="window.open('https://www.3schools.in','_self');">
Open tab
</button>
Try it Yourself »
Example 2 :- using the location.href
Demo using location.href <button onclick="window.location.href = 'https://www.3schools.in';">
Open webpage
</button>
Try it Yourself »
Example 3 :- using location.replace
Demo using location.replace
<button onclick="window.location.replace('https://www.3schools.in');">
Open webpage
</button>
Try it Yourself »
How do you open a new page after clicking submit button in HTML. If you want to redirect to another page after submitting a form, Then you have to use action attribute .
Example 4 :- Form submit and open a new page.
Demo using form submit <form action="https://www.google.com/search?q=">
<input type="text" value="3schools.in" name="q" >
<input type="submit" value="submit form">
</form>
Try it Yourself »
To open the form in a different tab, use the target attribute.
<form target='_blank' action=""></form>
Open a new blank page in javascript.
open a blank window
Try it Yourself »
In this post, I have explained how to open new html page on button click in javascript. I hope you have learned something new in this tutorial.
<script>
function myFunction() {
setTimeout(function () {
window.open("https://www.3schools.in");
}, 1000);
}
</script>
Use this code to open a new page on a particular time.
<a href="https://www.google.com" target="_blank">
<button>
click to open
</button>
</a>
Click Me
</a>
<style>
a{
padding: 5px 10px;
text-decoration: none;
color:inherit;
border-radius:5px;
box-shadow: 0 0 5px rgba(0,0,0,0.2);
}
a:hover{
box-shadow:0 0 1px rgba(0,0,0,0.2);
}
</style>