How can I change the page's URL when a visitor clicks a button?

Question

When a visitor clicks a button element, how can I change the URL?

Example:

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button onclick="javascript:window.location.href='http://www.google.com/'">Go to Google</button>
</form>

(Or see JSFiddle.)

For a quick demo page, I just need to send the visitor to a new URL when they click a button. I can execute JavaScript onclick (in the Alert Hi button), and the URL changes if I execute window.location.href='http://www.google.com/' from Firebug's console. What do I need to do to change the URL on a button click?

Your buttons submit the form. Also since you have a fiddle you should know that Google won't load in a frame because of `X-frame-options` — Musa, Nov 16 '12 at 23:25
@Shmiddty - I know! In this case, the button is nicely styled, but the page is in a half built state as I'm waiting on some specs from a stakeholder, so we're faking it. — KatieK, Nov 16 '12 at 23:33
@KatieK See the newest updates to my answer about making it work without JS — Ruan Mendes, Nov 16 '12 at 23:57
@KatieK I love the windows shortcuts tips on your webpage, I didn't know about shift+right click for extra options — Ruan Mendes, Dec 04 '12 at 21:31
@JuanMendes Cool, glad to hear it was helpful FWIW, I have an RSS feed at http://www.pewpewlaser.com/pplb.rss. — KatieK, Dec 04 '12 at 21:36

score 19 · Accepted Answer · edited May 23 '17 at 12:01

The problem is that the form is being submitted when you click on the button. Add type="button" so it doesn't submit the form. You also don't need javascript in the onclick attribute. See How to prevent buttons from submitting forms

Example http://jsfiddle.net/E7UEe/1/ Notice that it won't go to google.com because jsfiddle has disallowed it. Notice the error message Refused to display document because display forbidden by X-Frame-Options.

<form id="search">
  <input type="text" />
  <button onclick="javascript:alert('hi');">Alert Hi</button>
  <button type="button" onclick="window.location.href='http://www.google.com/'">Go to Google</button>
</form>

An alternative that works without JS is the appearance:button CSS directive http://jsfiddle.net/d6gWA/

<a class="btn"> Link looking like button</a>
.btn {
    appearance: button;
    -moz-appearance: button;
    -webkit-appearance: button;
    -ms-appearance: button;
}

Or you could always put the button in a link http://jsfiddle.net/d6gWA/2/

<a class="btn" href="http://www.google.com" target="_blank"><button type="button">Link Button</button></a>

Yes http://dev.w3.org/html5/markup/button.html `A button element with no type attribute specified represents the same thing as a button element with its type attribute set to "submit".` — Ruan Mendes, Nov 16 '12 at 23:35

score -1 · Answer 2 · answered Nov 16 '12 at 23:20

-1

 <button onclick="javascript:window.location='http://www.google.com/'">Go to Google</button>

just remove your .href and it sould work

answered Nov 16 '12 at 23:20

Louis Loudog Trottier

487
2
10

How can I change the page's URL when a visitor clicks a button?

2 Answers2