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

x
?
Solved

Button within link

Posted on 2006-05-05
12
Medium Priority
?
14,720 Views
Last Modified: 2011-08-18
I have a button inside a link element, and the behavior in IE is confusing.  The HTML looks something like this:

<a href="http://www.google.com" title="Update"><input type="button" value="Update" class="actionBtn"></a>

This works fine in FF, but not in IE.  To complicate matters, it appears that the onClick event handler fires in both FF and IE, so something like this works:

<a href="http://www.google.com" title="Update" onClick="alert('clicked link');return false;"><input type="button" value="Update" class="actionBtn"></a>

Any idea what is happening here?  I know I could take the button out and style the link via CSS, but I'm looking for alteratives.

Thanks!
0
Comment
Question by:todd_farmer
12 Comments
 
LVL 33

Expert Comment

by:knightEknight
ID: 16616891
You can achieve the same thing without the link by using javascript like this:

<input type="button" value="Update" class="actionBtn" onclick="location='http://www.google.com/';" />
0
 
LVL 30

Author Comment

by:todd_farmer
ID: 16616915
Yeah, but I would like to avoid using Javascript.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 16617634
Can you make a button image instead?

<a href="http://www.google.com" title="Update"><IMG src="mybutton.jpg" alt="Update" border="0" /></a>

0
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
LVL 30

Author Comment

by:todd_farmer
ID: 16617783
No, I'm pretty tied to using a button inside a link.  I'm hoping there is a simple explation/solution for what is happening in IE.  If not, I'll probably just use CSS on the link and jettison the button.
0
 
LVL 11

Expert Comment

by:mvan01
ID: 16618013
Hi todd,

Try this:

<FORM METHOD="LINK" ACTION="page1.htm">
<INPUT TYPE="submit" VALUE="Clickable Button">
</FORM>

Peace and joy.  mvan
0
 
LVL 30

Author Comment

by:todd_farmer
ID: 16618122
That doesn't seem to work for me, either.  I have a query string, and it does not appear to be passed when using that method:

<FORM METHOD="LINK" ACTION="page1.cgi?id=4">
<INPUT TYPE="submit" VALUE="Clickable Button">
</FORM>
0
 
LVL 30

Author Comment

by:todd_farmer
ID: 16618274
I added the query string parameters as hidden form elements, and it works now.  I sure would rather have just a button inside a link.  Any ideas why this doesn't work in IE?
0
 
LVL 30

Author Comment

by:todd_farmer
ID: 16618492
Most specifically, I'm trying to figure out why the onClick event handler fires for the link, but the browser doesn't go to the href location.
0
 
LVL 29

Expert Comment

by:QPR
ID: 16618952
try removing return false;
0
 
LVL 30

Author Comment

by:todd_farmer
ID: 16619983
The return false is only in the second example to show that the onclick event fires.  The first example has no onclick event handler, but IE still doesn't execute the link.
0
 
LVL 15

Assisted Solution

by:Thogek
Thogek earned 500 total points
ID: 16620647
The <input type="button"> element wasn't meant to be used this way, but was meant as a way to create a generic button to which you could attach (via script) any behavior you want.  I wouldn't expect to get a consistant behavior out of placing it inside of a hyperlink element.  :-/

Of course, you can always make your hyperlink look a lot like a button via CSS, although this is generally approximate, and the actual accuracy of the buttonish appearance may vary with OS (especially between Windows and Mac).

If it needs to look like a regular HTML button, the form-and-hidden-fields method you and mvan01 described above is probably the best answer you're going to get (although method="link" is undefined, so it's probably just assuming the default value of method="get", which is what you should be using for this sort of case).
0
 
LVL 11

Accepted Solution

by:
siliconbrit earned 500 total points
ID: 16631970

The answer to your question is - the button is always rendered by the browser IN FRONT of the link context (and all other contexts), so when you place your mouse over the button, the click event is sent to the button, and not to the link.

This is intentional for all form elements, so that when you use a drop-down box, the list always appears over the content and is not obscured by other elements.  This is why sometimes you see badly rendered sites, where form elements such as buttons and text boxes appear over the top of other content.

When someone sees a button on a page, they expect to be able to click on it, and not have it obscured by some text or picture element, so it all makes sense.

Anyway, you have several options.

1) Use the onclick javascript handler.  In which case you need to relax your rule about using javascript.

2) Wrap the button in a form.  The example you tried earlier was using the method "link", if you want to use parameters, you need to use the method "get":

      <FORM METHOD="GET" ACTION="page1.cgi?id=4">
         <INPUT TYPE="submit" VALUE="Clickable Button">
      </FORM>

3) Create an identical image of a button, with images for over and down states, and make the image a link.

4) CSS is the only way I know to place an active context over a form element, but you need to place the form elements inside a div with a lower z-index than a div that contains a link. Having said that, you need to fool the browser to re-position the higher div, and therefore the link context by using negative values, and I think this is now fixed in latest Firefox and IE6, so it's unlikely to be useful for you.

Try method (2) and let me know what happens
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

Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
Suggested Courses

581 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