JavaScript load a page on button click

Question

I am trying to do a very simple task here, I would like to be able to click a button on a page and have it take me to another page. I have tried window.location.href, and a bunch of other things and it does nothing. I have tried different platforms and different browsers, all with the same result.

I know that it can call a function but I just cannot get the new page to load. Also this is all in my local file system and both pages live at the same level (but I have also tried to load an external page like www.apple.com).

Any thoughts?

Thanks Patrick

You need to be more specific than "a bunch of other things." Post your code (HTML and JavaScript) and tell us what errors you're getting. — Matthew Flaschen, Sep 10 '10 at 07:12
Not a good idea: A button is experienced by the user as something that causes action/trigger (postback, save/load). A Link (a href) is jused for navigation. Do not mix those. You'll confuse users. — Caspar Kleijne, Sep 10 '10 at 07:46

score 101 · Accepted Answer · edited Aug 30 '18 at 05:40

101

Simple code to redirect page

<!-- html button designing and calling the event in javascript -->
<input id="btntest" type="button" value="Check" 
       onclick="window.location.href = 'http://www.google.com'" />

edited Aug 30 '18 at 05:40

Mathieu

8,840
7
32
45

answered Sep 10 '10 at 07:17

Pranay Rana

175,020
35
237
263

1

This one worked, however I think that my issue was that I had type="submit" and not type="button". Thanks for the help! – Patrick Sep 10 '10 at 17:47
1

`window.location.assign()` worked better for me in firefox. For some reason assignment `=` messed history. – akostadinov Apr 21 '15 at 11:28

score 24 · Answer 2 · answered Sep 10 '10 at 07:16

24

Don't abuse form elements where <a> elements will suffice.

<style>
    /* or put this in your stylesheet */

    .button {
        display: inline-block;
        padding: 3px 5px;
        border: 1px solid #000;
        background: #eee;
    }

</style>

<!-- instead of abusing a button or input element -->
<a href="url" class="button">text</a>

answered Sep 10 '10 at 07:16

BGerrissen

21,250
3
39
40

1

I was also thinking of going this way. Thank you for the help. I enjoy these buttons more anyway. Thanks again. – Patrick Sep 10 '10 at 17:51
I tried this button and it doesn't look good. It is just a link with a black line around it. – RedDragonWebDesign Sep 09 '16 at 08:19

score 20 · Answer 3 · answered Sep 10 '10 at 07:15

20

Just window.location = "http://wherever.you.wanna.go.com/", or, for local links, window.location = "my_relative_link.html".

You can try it by typing it into your address bar as well, e.g. javascript: window.location = "http://www.google.com/".

Also note that the protocol part of the URL (http://) is not optional for absolute links; omitting it will make javascript assume a relative link.

answered Sep 10 '10 at 07:15

tdammers

20,353
1
39
56

Thanks for the suggestion, I didn't know you could run javascript in the browser, learn something new every day. I was trying the window.location and others like it but couldn't get it to work, and I knew that it should. I found that my "type" was wrong so it had nothing to do with the JavaScript and everything to do with the HTML. Thanks again for the advice. – Patrick Sep 10 '10 at 17:49

score 5 · Answer 4 · answered Mar 27 '17 at 03:03

The answers here work to open the page in the same browser window/tab.

However, I wanted the page to open in a new window/tab when they click a button. (tab/window decision depends on the user's browser setting)

So here is how it worked to open the page in new tab/window:

<button type="button" onclick="window.open('http://www.example.com/', '_blank');">View Example Page</button>

It doesn't have to be a button, you can use anywhere. Notice the _blank that is used to open in new tab/window.

JavaScript load a page on button click

4 Answers4

Linked