SitePoint Sponsor

User Tag List

Results 1 to 8 of 8
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Button not working

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

    I am using
    HTML Code:
    <button onclick="window.location.href='myurl'">Next</button>
    , but it is not working

    Help.

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    try using the whole protocol:
    <button onclick="window.location.href='http://myurl'">Next</button>

    hope that helps

  3. #3
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    "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 Sitepoint Reference.
    So maybe:
    HTML Code:
    <button type="submit" onclick="window.location.href='http://myurl'">Next</button>
    or instead:
    HTML Code:
    <input type="button" value="Next" onclick="window.location.href='http://myurl'" />

  4. #4
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Francky View Post
    "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 Sitepoint Reference.
    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.

    Code:
    .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.
    Code:
    <a href="http://example.org" class="button">click me</a>

    If you still *really* want to use a button element:
    Code:
    function newpage(url){
    window.location=url;
    }
    Code:
    <button onclick="newpage('http://example.org');">click me</button>
    Or just
    Code:
    <button onclick="window.location='http://example.org'">click me</button>
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  5. #5
    SitePoint Member
    Join Date
    Jul 2013
    Location
    Kolkata, India
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Try using this

    Code:
    <input type="submit" value="next" onclick="newpage('http://example.org');" />
    I guess this will do

    Cheers

  6. #6
    SitePoint Evangelist silver trophybronze trophy
    Join Date
    Jul 2013
    Posts
    406
    Mentioned
    22 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    SitePoint Member
    Join Date
    Aug 2013
    Location
    Fpolis - SC
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #8
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,278
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •