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?

Coakley

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 – Charlena

So an anchor tag just won't suffice? – Willard

@Willard - 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. – Coakley

@Coakley See the newest updates to my answer about making it work without JS – Frontier

@Coakley I love the windows shortcuts tips on your webpage, I didn't know about shift+right click for extra options – Frontier

@JuanMendes Cool, glad to hear it was helpful FWIW, I have an RSS feed at pewpewlaser.com/pplb.rss. – Coakley

Answer 1

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>​

Frontier

Is a button assumed to be a submit button? – Coakley

Yes 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". – Frontier

Answer 2

You could also make the form change the link when you submit it, which could be used for buttons or other various methods. Just in case anyone else was looking at this post confused about how to make other form attributes submit a form. In this case, it would look like

<form id="search" action="http://www.google.com/">
  <input type="text" />
  <button>Go to Google</button>
</form>

This button submits the form, using the form action field to change the URL. This can be applied to any different type of form item, so long as it submits the form.

Teletypewriter

Answer 3

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

just remove your .href and it sould work

Cannell