Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2010-01-07
10
Medium Priority
?
682 Views
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?
<div>
<a href="list.php" title="Return to list without updating anything">
<input name="cancel" type="button" id="cancel" value="Cancel" /></a>
</div>

Open in new window

0
Comment
Question by:me_patrick
  • 3
  • 2
  • 2
  • +3
10 Comments
 
LVL 70

Assisted Solution

by:Jason C. Levine
Jason C. Levine earned 200 total points
ID: 26205927
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.  
0
 

Author Comment

by:me_patrick
ID: 26206041
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.
0
 
LVL 1

Assisted Solution

by:niclassahlin
niclassahlin earned 200 total points
ID: 26206164
You can use a regular button instead:

<div>
<a href="list.php" title="Return to list without updating anything">
<button id="cancel">Cancel</button></a>
</div>
0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 22

Accepted Solution

by:
kadaba earned 800 total points
ID: 26206851
either use anchor or use button.
If you need a button like feel but with an anchor then use an image for the anchor.

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

Open in new window

0
 
LVL 29

Assisted Solution

by:rdivilbiss
rdivilbiss earned 600 total points
ID: 26207086
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.

Regards,
Rod

0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 26207188
Yep.

http://www.rodsdot.com/php/testButton.htm 

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" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">

<head>
<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');
	}else{
		alert('okay');
	}
}
</script>
</head>

<body>
<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>
<p>2<br>
3<br>
4<br>
5<br>
6<br>
7<br>
8<br>
9<br>
10<br>
11<br>
12<br>
13<br>
14<br>
15<br>
16<br>
17<br>
18<br>
19<br>
20<br>
21<br>
22<br>
23<br>
24<br>
25<br>
26<br>
27<br>
28<br>
29<br>
30<br>
<a name="bottom"></a></p>
</body>

</html>

Open in new window

validation.jpg
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26207273
Rod,

Very nice analysis.
0
 
LVL 19

Assisted Solution

by:v2Media
v2Media earned 200 total points
ID: 26207483
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" />
</form>

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" />
0
 

Author Closing Comment

by:me_patrick
ID: 31674338
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.
Regards.
Patrick.
0
 
LVL 29

Expert Comment

by:rdivilbiss
ID: 26214835
Moved the demo page to http://www.rodsdot.com/php/testButton.php for posterity.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to create an extensible mechanism for linked drop downs.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

580 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