CODEWITHSUNDEEP
javascripthtmlformssubmit
KatieK
KatieK

Reputation: 13843

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

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?

Upvotes: 5

Views: 73894

Answers (3)

cat88888888
cat88888888

Reputation: 1

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.

Upvotes: 0

Ruan Mendes
Ruan Mendes

Reputation: 92274

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

Upvotes: 19

Louis Loudog Trottier
Louis Loudog Trottier

Reputation: 487

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

just remove your .href and it sould work

Upvotes: -1

Related Questions