Button inside A HREF causes problems in IE

[Ryan Mortier]

I have a table and at the end of each row I have a button that is not in a form like so:

<a href="?deleteid="><input type="button" value="Delete" onclick="return confirm('Confirm Deletion')" /></a>

Clicking the button works in all browsers except Internet Explorer

What is wrong?

[Stevie D]

Why would you have a button inside an <a> anyway? That sounds like an accessibility foul-up from the word go.

A button should be used to initiate an action via the server, such as a form submission.

A hyperlink should be used to navigate to another page or a client-side action (eg Javascript).

I can't think of any situation where putting a <button> inside an <a href> would be the right way of doing things (although I'm open to being corrected on that). If you want the look of a button for your hyperlink, you're better off recreating that look with CSS applied to text, or an image.

[Ryan Mortier]

Why would you have a button inside an <a> anyway? That sounds like an accessibility foul-up from the word go.

A button should be used to initiate an action via the server, such as a form submission.

A hyperlink should be used to navigate to another page or a client-side action (eg Javascript).

I can't think of any situation where putting a <button> inside an <a href> would be the right way of doing things (although I'm open to being corrected on that). If you want the look of a button for your hyperlink, you're better off recreating that look with CSS applied to text, or an image.

Well I can't use a form submit button because forms can't be inside a table. I basically just want a submit button that sends GET variables without the form.

If I don't use <a href> then the button does nothing. How do I make the button active with a specified link?

Yes, I could just use a link without the button but the button looks nicer which is why I was trying to use the button as a link instead of text.

[Ryan Mortier]

What would be the point of <input type="button"> if we can't wrap it in a link?

Am I supposed to use onclick="" to make it work?

If so, (my JavaScript is awful at the moment) how do I implement two functions into the onclick="" part? For example, I want it to give me the confirmation for the delete function and then actually navigate somewhere if confirmed.

So far I have this:

onclick="return confirm('Confirm Deletion')"

[FFCus]

Since you are already using JavaScript, why don't you use it to handle the page redirect as well and remove the link altogether?

<input type="button" value="Delete" onclick="confimDelete()" />

<script type="text/javascript">
<!--
function confirmDelete() {
	var vReply = confirm("This item will be deleted. Continue?")
	if (vReply){
		window.location = "page-to-handle-delete.html";
	}
	else{
	    // If needed, you can take action here when the Cancel button is clicked...
		// alert("Your item was NOT deleted.")
	}
}
//-->
</script>

[Ryan Mortier]

That'll work perfect, thank you.

So does <input type="button"> only work with onclick=""?

[FFCus]

So does <input type="button"> only work with onclick=""?

I've never used it without JS. Maybe somebody else can share an experience where JS wasn't used.

Also, you don't need a button there if you don't want to. You can use a link like this:

<a href="javascript:void(0)" onclick="confirmDelete()">Delete</a>

As always, be sure to code defensively to warn your visitors that JavaScript is needed for the page to function correctly. There are still a few people that are browsing like it's 1996.

[Ryan Mortier]

Reason I was using the button is because it looked nicer and I didn't want to mess with a bunch of CSS for a simple app.

[FFCus]

Reason I was using the button is because it looked nicer and I didn't want to mess with a bunch of CSS for a simple app.

No worries, I just wanted to be sure you knew about the options that were available.

[Stevie D]

What would be the point of <input type="button"> if we can't wrap it in a link?

Because it offers more styling options than a regular Submit/Cancel type <input>.

Since you are already using JavaScript, why don't you use it to handle the page redirect as well and remove the link altogether?

How about ... because it will ruin the accessibility of the site, meaning that anyone not running Javascript can't access the service, including a fair proportion of people using mobile phone browsers.

So does <input type="button"> only work with onclick=""?

Pretty much - <input type="button"> doesn't actually do anything, so needs to paired up with Javascript to make it useful. A better solution might be to use <button type="submit">, which (I think!) gives you the same styling advantages, but means that the form action is called when the button is clicked on, which makes it a more useful setup.

[rguy84]

Well I can't use a form submit button because forms can't be inside a table.

Why not?

I basically just want a submit button that sends GET variables without the form.

Not really possible unless you use JS to mimic a form

If I don't use <a href> then the button does nothing. How do I make the button active with a specified link?

What are you trying to do?

Yes, I could just use a link without the button but the button looks nicer which is why I was trying to use the button as a link instead of text.

Give the link a class/id, use CSS to look like a button

[Ryan Mortier]

Why not?

HTML5 doesn't validate if a <form> tag is within a <table> tag. I haven't actually read the specification so I'm not 100% sure.

What are you trying to do?

At its simplest, all I wanted to do was use the button instead of blue link text to link somewhere and thought I could replace the text with the input tag.

Give the link a class/id, use CSS to look like a button

I was trying to keep it all HTML and didn't want to use CSS or JS if it wasn't necessary which I've learned is not the case.

[FFCus]

How about ... because it will ruin the accessibility of the site, meaning that anyone not running Javascript can't access the service, including a fair proportion of people using mobile phone browsers.

Which is why I posted the disclaimer about defensive coding and handling users that have JS disabled. We do not know if this page is public facing or for a closed intranet where the browsers and capabilities are known. The OP will need to make that assessment and handle accordingly.

[Ryan Mortier]

Which is why I posted the disclaimer about defensive coding and handling users that have JS disabled. We do not know if this page is public facing or for a closed intranet where the browsers and capabilities are known. The OP will need to make that assessment and handle accordingly.

It's an intranet and we don't allow any other browser other than IE. All users will have JS forced on through GPOs

[FFCus]

It's an intranet and we don't allow any other browser other than IE. All users will have JS forced on through GPOs

Thanks for the further info...but everybody is forced to use IE? Ouch

[Ryan Mortier]

Thanks for the further info...but everybody is forced to use IE? Ouch

It's mainly to keep central administration to a low. We can keep IE updated through GPOs and not have to worry about users not being able to install the latest Firefox update. Also, users tend to install every toolbar out there somehow and we can prevent this easily this way.

I would love to deploy Chrome with its silent background updates; However, that is not my decision to make.

[FFCus]

It's mainly to keep central administration to a low. We can keep IE updated through GPOs and not have to worry about users not being able to install the latest Firefox update. Also, users tend to install every toolbar out there somehow and we can prevent this easily this way.

I would love to deploy Chrome with its silent background updates; However, that is not my decision to make.

Yeah, I totally understand. GP certainly does keep the housekeeping easy in that environment.

[rmw82]

It seems to me that you can simply put your anchor tag around an image of a button, no? This would give you the appearance of a button, yet it acts like a link.