I would like to create an HTML button that acts like a link. So, when you click the button, it redirects to a page. I would like it to be as accessible as possible.
I know there have been a lot of answers submitted, but none of them seemed to really nail the problem. Here is my take at a solution:
method that the OP is starting with. This works really well, but it sometimes appends a ?
to the URL. The ?
is the main problem.?
doesn't end up appended to the URL. It will seamlessly fallback to the
method for the very small fraction of users who don't have JavaScript enabled.
or
even exist. I'm using jQuery in this example, because it is quick and easy, but it can be done in 'vanilla' JavaScript as well.
action
attribute.// Listen for any clicks on an element in the document with the `link` class
$(document).on('click', '.link', function(e) {
// Prevent the default action (e.g. submit the form)
e.preventDefault();
// Get the URL specified in the form
var url = e.target.parentElement.action;
window.location = url;
});
Form buttons as links