SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Pretty SUBMIT button: Use a link with JS or?

    This is an issue that has plagued me for years and I seem to resolve it differently for every project...

    I like to make all my button links like this:
    <a href="cart.html" class="button">View Cart</a>

    And then I use CSS to display the link as a button, with a button graphic as a background -- but using the system text for the actual button text.

    The problem is: Doing the same thing for form submit buttons isn't possible because some browsers ignore the styling of submit buttons.

    So I'm left with 2 choices I can see:

    1. Use a <a> link for the submit button and employ javascript to actually submit the form onclick.

    2. Use <input type="image">

    Neither is ideal because option 1 excludes anyone not using javascript and option 2 requires a separate image for every submit button AND the text may not perfectly match the browser rendered text of the other buttons.

    What do you guys do?

  2. #2
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Stop thinking too much about it and go with #2.

  3. #3
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ...but consider what happens for example on a shopping cart page with two buttons at the bottom like this:

    [Continue Shopping] [Place Order]

    They're right next to each other. The left button will have text rendered by the browser (and probably a tasteful rollover effect) and the right button will have Photoshop rendered text and no rollover.

    I guess I'm leaning towards option one but hoping someone has a clever workaround for degrading gracefully when javascript is disabled.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,158
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Think of it this way: what's more likely to make you lose customers – a slightly bland but readily recognisable button, or a form that cannot be submitted because it relies on JavaScript?

    If the appearance of this button is so important to you, you might do something like this:
    1. Use a regular <input type="submit"> or <input type="image"> in your markup.
    2. Use unobtrusive JavaScript to remove the button and replace it with a styled link.


    That way you can have the cake and eat it, too. And it's perfectly accessible.
    Birnam wood is come to Dunsinane

  5. #5
    The Mind's I ® silver trophy Dark Tranquility's Avatar
    Join Date
    Sep 2003
    Location
    KSA - UAE
    Posts
    9,457
    Mentioned
    8 Post(s)
    Tagged
    1 Thread(s)
    Yes...Always provide alternatives to your javascript. Make your site functional and then add the cool stuff like JavaScript... JS may not be installed on your visitors computers or it is installed by blocked by the network or by some Browser extension etc...

  6. #6
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your input folks. I guess my new policy going forward will be to use jQuery to replace all submit buttons belonging to the "pretty" class. The 1&#37; no-javascript users will get an ugly browser default submit button -- but this obviously preferable to the form not being usable. Anyone else already thought this through and developed a different policy?

  7. #7
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In case anyone's interested... Here's the solution I've decided on...

    1. Use an type=image submit button and make a generic button graphic that matches the rest of my buttons on the page. This works for everyone even if "submit" isn't as descriptive as "place order" or whatever I would like it say.

    2. Use jquery to unobtrusively swap out my submit tags for prettier anchor tags, then attach the submit parent form behavior. Here's the jquery I hacked up for that:

    Code:
    // Replace all pretty-submit buttons with a link
    $('input[type=image][class=image-submit]').each( function() {
      var new_tag = '<a href="' + this.title + '" class="image-submit">' + this.title + '</a>';
      $(this).after(new_tag).remove();
    });
    // Now attach the submit behavior to these links
    $('a[class=image-submit]').click( function() {
      $(this).parents('form').submit();
      return false;
    });
    So now any <input type=image> tags with class="image-submit" will automatically be replaced with <a> tags and still have the "image-submit" class so that I can style those with my button background graphic. The link text is taken from the title attribute assigned to the original input tag.

    This works perfectly and effortlessly. Just give it the "image-submit" class and a title attribute, and let jquery make it pretty.

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2008
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by df-sean View Post
    This works perfectly and effortlessly. Just give it the "image-submit" class and a title attribute, and let jquery make it pretty.
    Why not use the "button" element which is meant for styled buttons? You can have images inside, do rollover effects, the whole works. Plus, styling is much more portable over different browsers than input type="submit". They also submit any forms they are inside to boot.

    Good article here: http://particletree.com/features/red...utton-element/

  9. #9
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,
    A-lot of people here are talking about javascript, I personally would start to phase myself out of javascript, because search engines don't really like the use of javascript on pages. And it has been said (this could be a rumor) but google may actually penalize people for use of javascript. Again that is just a rumor and have no way to support it 100%, but just a warning.

    When we as a development company do nice submit buttons we ALWAYS use the <input image> option.

  10. #10
    SitePoint Evangelist Karpie's Avatar
    Join Date
    Jul 2007
    Location
    Perth, Australia
    Posts
    445
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShawnsITSolution View Post
    Hello,
    And it has been said (this could be a rumor) but google may actually penalize people for use of javascript. Again that is just a rumor and have no way to support it 100%, but just a warning.
    Completely unfounded rumour. Google themselves use copious amounts of Javascript on all their sites. There's no basis to it whatsoever.

  11. #11
    SitePoint Zealot
    Join Date
    Jul 2008
    Posts
    145
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well, as I said it was not 100% true , and i didn't have anything that supports it, I was just saying that i had heard about this and was just giving a warning incase it was true. Better to be safe than sorry.

  12. #12
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ShawnsITSolution View Post
    Well, as I said it was not 100&#37; true , and i didn't have anything that supports it, I was just saying that i had heard about this and was just giving a warning incase it was true. Better to be safe than sorry.
    Well next time, please do further researching and educate yourself more before giving false information.

  13. #13
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,598
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Hello all.

    Can you tell us where you heard this? Do they have a source?
    Always looking for web design/development work. Willing to do it cheap to build portfolio!

  14. #14
    SitePoint Member
    Join Date
    Jul 2005
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    As I understand it, it's not that Google will penalize you for using Javascript, it's that it doesn't process it. So in other words, if you have a link with href="#" and a javascript handler that changes the window.location (or submits the form in this case), then Google will never follow that link and can't index the destination page as a result.

    This is why the method I've decided on uses a natural submit button which google can follow. For those using Javascript (about 99&#37; of users typically), the real submit button gets replaced with a prettier one. But as I understand it, there's no negative SEO impact in doing this kind of thing with Javascript as long as you aren't trying to deliberately deceive Google by having your Javascript direct to some OTHER place than your original link.

    @philjohn -- Interesting article about the button element. Thanks for that link.

  15. #15
    Guru in training bronze trophy SoulScratch's Avatar
    Join Date
    Apr 2006
    Location
    Maryland
    Posts
    1,838
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by philjohn View Post
    Why not use the "button" element which is meant for styled buttons? You can have images inside, do rollover effects, the whole works. Plus, styling is much more portable over different browsers than input type="submit". They also submit any forms they are inside to boot.

    Good article here: http://particletree.com/features/red...utton-element/
    There are issues with multiple instances of button elements and the value that gets passed to it, which is why I avoid it almost always ( for IE at least ).
    Cross browser css bugs

    Dan Schulz you will be missed


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
  •