Trying to use an input type 'button' within and anchor point with IE8 - doesn't work?

Posted on 2010-01-07
Last Modified: 2012-05-08
Can anyone tell me how to make this little snipet  work in IE - it works in FF, Chrome & Safari. Have I got to redo this with an image?

<a href="list.php" title="Return to list without updating anything">

<input name="cancel" type="button" id="cancel" value="Cancel" /></a>


Open in new window

Question by:me_patrick
    LVL 70

    Assisted Solution

    by:Jason C. Levine
    You can't use an input with an a tag. Either use an image, add a form tag with the action set to the desired link or use JavaScript and onclick.  

    Author Comment

    I not sure I fully undterstand you Jason - this is a button on a form, it just doesn't 'submit' - it redirects to another script directly.
    LVL 1

    Assisted Solution

    You can use a regular button instead:

    <a href="list.php" title="Return to list without updating anything">
    <button id="cancel">Cancel</button></a>
    LVL 22

    Accepted Solution

    either use anchor or use button.
    If you need a button like feel but with an anchor then use an image for the anchor.

    <input name="cancel" title="Return to list without updating anything" type="button" id="cancel" value="Cancel" onclick="javascript:window.location.href='list.php';"/>
    <a href="list.php" title="Return to list without updating anything">Cancel</a>

    Open in new window

    LVL 29

    Assisted Solution

    Very curious markup, which lead me to double check the W3C recommendation.  This isn't actually prohibited, but it is a bad idea as I'll try to explain.

    In IE, events travel in one direction only.  In Firefox, and most other browsers not based on an IE engine, the event propagates both down and up the nodes.

    Where you placed the button made it a child node to the anchor.  Both an anchor and a button respond to a click event.  In IE when the button receives the mouse click it does nothing as it has no action assigned to the button's click event: so there is nothing to do.  That is the end of the click event as far as IE is concerned.

    In the actual W3c recommendation, an event should travel down the nodes (capture phase) and then travel back up the nodes (bubble phase) until it has been handled.  So in Firefox, when your button fails to "capture" and act upon the mouse click, it bubbles up to the parent node (the anchor) at which point the anchor's click event (changing the location to the page specified in the href attribute) occurs.

    Frankly reading the W3C spec regarding the anchor tag, is relatively mute about what can be placed between the opening and closing tags of an anchor, although the only examples given are text and of course by itself text has no native click event.

    It is common knowledge that an image can be placed inside the opening and closing of an anchor, and like text, the image has no native click event so the anchor will fire.

    The spec does prohibit the nesting of links, clearly the spirit of the spec is to avoid the situation you created by nesting a button inside an anchor. e.g. You put two potentially conflicting click event handlers inside each other.  How would a user agent know which to obey.

    If your button inside the anchor had an onclick event, that event would be fired first no matter what browser you use.  The question then becomes, what if anything should happen regarding the click as far as the anchor is concerned.  In IE nothing would happen but in other browsers that anchor's event may still occur if the button's click event handler did not stop propagation of the event.

    Again, while I can not find a specific reference in the spec prohibiting a button inside an anchor, it clearly violates the spirit of the prohibition of nesting links.

    I'm only telling you why it does not work in IE.  And I agree that it is not good markup, but will stop short off saying it is invalid.  Frankly, you might be able to play some devious tricks with this.

    Those before me gave you correct information as to what you should do to achieve the desired result. I just was commenting on the different method of event handling between IE and the rest of the browser's which is why, (while bad,) it worked in FireFox.

    I neither want nor deserve any points. This is just commentary on something I found curious, but I understood to be caused by the different event handling.


    LVL 29

    Expert Comment


    Passes validation. e.g. the button inside the anchor doesn't violate the recommendation.

    You get different behavior in IE and FF.  In IE the button event fires and that's the end of it. In FireFox the button fires first and then the event bubbles up to the anchor and fires it as well.

    Curious....wonder what bad things I can do with this.
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "">
    <html lang="en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Button In An Anchor</title>
    <script type="text/javascript">
    function doButtonClick() {
    	if (window.event) {
    		alert('No, I won\'t go');
    <p>1 <a href="#bottom"><input name="cancel" title="Return to list without updating anything" type="button" id="cancel" value="Goto The Bottom Of The Page" onclick="doButtonClick();"></a></p>
    <a name="bottom"></a></p>

    Open in new window

    LVL 70

    Expert Comment

    by:Jason C. Levine

    Very nice analysis.
    LVL 19

    Assisted Solution

    If you can move the cancel button to outside of the original form, use another form to return the user to list.php

    <form method="post" action="list.php">
    <input type="button" name="cancel" value="Cancel" />

    If you cant move the button outside of the original form, use a bit of javascript: -

    <input type="button" name="cancel" onclick="location.href='list.php'" value="Cancel" />

    Author Closing Comment

    Great response guys - thanks very much. I've spread the points out as fairly as possible - I gave  kadaba the most as this was the solution I used and even though Rod said he didn't want any points I awarded him some anyway as I found the contribution very helpful and illuminating,

    Thanks to everybody who took an interest.
    LVL 29

    Expert Comment

    Moved the demo page to for posterity.

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
    When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
    In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
    HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    14 Experts available now in Live!

    Get 1:1 Help Now