input buttons embedded within a hyperlink does not work in ie8

Question

In ie9 this code works;

   <span id="ForwardNavigationEnabled" style="display:inline;">
        <a class="imagelink" href="@Url.Action("Details", "Subcontractor", new { id = Model.Navigator.NextPageId })">
            <input id="btnNext" type="button" value="Next >|" />
        </a>
        <a class="imagelink" href="@Url.Action("Details", "Subcontractor", new { id = Model.Navigator.LastPageId })">
            <input id="btnLast" type="button" value="Last >>|" />
        </a>
    </span>

Which is to say when you click on the button the href event in the hyperlink is fired. In ie8 the hyperlink is ignored and the click event of the button is fired instead, which does not go anywhere.

One fix for ie8 would be to give the button a click event and navigate that way. Another solution would be to replace the button with an image of the button.

But is there a neater solution?

Style the link as a button, if the only thing you're looking to achieve here is get a button to navigate to another part of a document. It doesn't even have to be an image, as you suggest. Give the `` element a bit of `padding` and `border`, maybe some `border-radius`, maybe some `box-shadow` and/or gradient inside. You can decide whether or not you'd want to set it as an `inline` or a `block`. — Richard Neil Ilagan, Feb 19 '13 at 09:33

score 2 · Answer 1 · answered Feb 19 '13 at 09:31

2

It is invalid HTML to nest an <input> (or any form control) inside an <a> element.

If you want a link. Use a link and only a link. If you want it to look like a button, use CSS.

answered Feb 19 '13 at 09:31

Quentin

914,110
126
1,211
1,335

score 2 · Accepted Answer · edited May 23 '17 at 12:27

Quick Solution using jQuery:

$("a > button").on('click', function() { 
    location.href = $(this).closest("a").attr("href");
}); // fixed

More on the subject

w3c has no problem with button inside of link tag, so it is just another MS sub-standard.

To get the effect you're looking for, you can ditch the <a> tags and add a simple event handler to each button which navigates the browser to the desired location.

However; there's a reason regular links work as they do:

Users can instantly recognise links, and understand that they navigate to other pages
Search engines can identify them as links and follow them
Screen readers can identify them as links and advise their users appropriately
You also add a completely unnecessary requirement to have JavaScript enabled just to perform basic navigation; this is such a fundamental aspect of the web that I would consider such a dependency as unacceptable.

You can style your links, if desired, using a background image or background colour, border and other css techniques, so that they look like buttons, but under the covers, they should be ordinary links.

More?

Button inside of anchor link works in Firefox but not in Internet Explorer?

I'd interject that you **shouldn't be using `.live()`**. It's obsolete, and ultimately bad practice. Use the delegate flavor of `.on()` instead. — Richard Neil Ilagan, Feb 19 '13 at 09:38

input buttons embedded within a hyperlink does not work in ie8

2 Answers2

Quick Solution using jQuery:

More on the subject

More?