Web Tools Table Maker3schools TranslateImage CompressorFavicon Icon GeneratorCrop & Resize Image
Apu
Apu November 13, 2022 › #Button #Form

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 »
By passing the _self parameter, the URL will replace the current page.

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.

save
listen
AI Answer
4 Answers
Write Your Answer
  1. <button onclick="myFunction()">Open a new page</button>

    <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.
    • One of the best way to open a new webpage by clicking a button is including the anchor element with its href attribute. For an example.... <a href='https://example.com'>Anchor text</a>
    Reply Delete
    Share
    Reply Delete
    Share
  2. Open a new tab using the simple a tag.
    <a href="https://www.google.com" target="_blank">
    <button>
    click to open
    </button>
    </a>
    Reply Delete
    Share
  3. I think it would be more better if we use the anchor element and using the css, we can style the anchor element as a button.<a href="https://example.com">
    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>

    Reply Delete
    Share
loading
back
View All