Question

21

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

rated 0 times [ 26] [ 5] / answers: 1 / hits: 66821 / 12 Years ago, fri, november 16, 2012, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

myrap

Add To Favorites

Follow

Total Points: 407

Total Questions: 105

Total Answers: 109

Location: Cambodia

Member since Thu, Oct 7, 2021

3 Years ago

answered 12 Years ago jennie · Accepted Answer

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>