Button not working

HTML & CSS
1

I have built a large from and I have just discoverd my <button></buttom> does not work as a link

I am using

<button onclick="window.location.href='myurl'">Next</button>

, but it is not working

Help.

2

try using the whole protocol:
<button onclick=“window.location.href=‘http://myurl’”>Next</button>

hope that helps

3

“IE is buggy and will not submit a form with a button unless there is a type attribute set to “submit” (it should default to “submit” rather than have to be told).” is telling the [U]Sitepoint Reference[/U].
So maybe:

<button type="submit" onclick="window.location.href='http://myurl'">Next</button>

or instead:

<input type="button" value="Next" onclick="window.location.href='http://myurl'" />
4

That has to do with what IE6-8 sends as POST data when the button element is used. It sends the name of the button, but not the contents of the value attribute. Other browsers send the name of the button and the value of the value attribute.

That browser bug wouldn’t have an affect here, since it’s the onclick attribute that is being used.

The best approach would be just to use an anchor element and use CSS to make it look like a button, and forgo the use of a button.


.button, form button, form input[type="button"], form input[type="submit"], #conten form input[type="reset"] {
    display: inline-block;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    font-weight:bold;
    padding: .2em .4em .2em .4em;
    font-size: 1.2em;
    text-shadow: 0 1px 1px rgba(0,0,0,.2);
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    -moz-box-shadow: 0 1px 1px rgba(0,0,0,.1);
    box-shadow: 0 1px 1px rgba(0,0,0,.1);
}
.button:hover, form button:hover, form input[type="button"], form input[type="submit"]:hover, form input[type="reset"]:hover {
    text-decoration: none;
}
.button:active, form button:active, form input[type="button"]:active, form input[type="submit"]:active,  form input[type="reset"]:active {
    position: relative;
    top: 1px;
}

Then add borders and background colors/gradients as appropriate.

<a href="http://example.org" class="button">click me</a>

If you still really want to use a button element:


function newpage(url){
window.location=url;
}


<button onclick="newpage('http://example.org');">click me</button>

Or just

<button onclick="window.location='http://example.org'">click me</button>
5

Try using this

<input type="submit" value="next" onclick="newpage('http://example.org');" />

I guess this will do

Cheers

6

I should prefer the suggested “button-like styled link” solution by ForceFlow: that doesn’t need javascript and is by far the best way for accessibility.
It is also preferable for easy cross browser custom styling, in line with the page design (browsers/operating systems -and their versions- have different pre-fab styled controls for a button or input element).

7

Have your tried using a <div> as a button and apply the onclick event on it? Cause if it does not work it may happen that you JS is disable in your webbrowser!

8

Have your tried using a <div> as a button and apply the onclick event on it?

An easier check for Javascript enables is just adding an alert() somewhere.

Certainly we wouldn’t want to test with an onclick div and then accidentally leave it there, as div’s don’t have the proper roles, focusability or default behaviour we need for buttons.

This is a form? What’s wrong with this

<form action=“myurl” method=“get/post” (dunno which OP wants)>
…
<input type=“submit” value=“Next”>
</form>

Style input like button. Padding, background color, border-radius, done.