How can I change the page's URL when a visitor clicks a button?
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>
KatieK
Web developer. Nodebot ❤️er. Sasstronaut. Baker. Glass artist. Gamer. Kitten ogler. She/her.
Updated on November 17, 2020Comments
-
KatieK over 3 years
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>
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? -
KatieK over 11 yearsIs a button assumed to be a submit button?
-
Ruan Mendes over 11 yearsYes 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".