Wrapping Input Button in A HREF

Question

I am trying to get a button to link to a URL by wrapping the input button in a href. When I click the button, it does not do anything at all, even though the source shows it as having the proper syntax. I have also tried changing it to use an onClick() method in the button as well with no luck.

<a href='" . htmlentities($console) . "'><input type='button' style='width:100px' value='Provision'></a>

The URL when viewed via the page source is shown as...

<a href='https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8'><input type='button' style='width:100px' value='Provision'></a>

Answer 1

Use:

<input type="button" onclick="window.location.href = 'https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8'; return false;" style='width:100px' value='Provision'>

Answer 2

For those of you looking for a solution that doesn't requiring javascript: Wrap the button in a single purpose form. For OP's example, the solution would be:

<form action="https://prov.domain.net/novnc/console.php?uuid=943b37ef-46a8" method="get">
    <button type="submit">Provision</button>
</form>

Answer 3

You can use onclick event instead a element:

<input type='button' style='width:100px; cursor:pointer' onClick='gotoUrl(" . htmlentities($console) . ")' value='Provision'>

And in your client side include this function

  <script>

    function gotoUrl(url){
       location.href = url;
    }
    </script>

Answer 4

It would likely be easier to simply use text and CSS, but that said, if you're going for a button style look then you have a couple of options. The first is, instead of using the tag, use the similar tag. The button tag will allow for HTML code to be inside of it.

<button name="button1"><a href="#">Insert Text Here</a></button>

This is a simple solution but unfortunately no longer valid according to the spec. For reference: http://www.w3.org/TR/2011/WD-html5-20110525/the-button-element.html

Another solution would simply be to use Javascript:

<input type="button" name="button1" value="Click Me" onClick="location.replace('http://example.org');">

Which, naturally, you wouldn't know if you didn't know JS.

The final, a little more creative solution is with a form, but this will break any form your button is already currently in if any.

<form name="form1" action="http://example.org">
<input type="submit" value="Go to example page">
</form>

And there you have it.

Answer 5

The effect of nesting interactive elements, such as wrapping an input element in an a href element, is undefined and browser-dependent. Such nesting has been explicitly forbidden in HTML5 CR: an a element must not have interactive descendants.

It seems that what you are trying to achieve is a link that looks like a button. The best way is to use a normal link, <a href=...>Provision</a>, and CSS to style it to look like a button (possibly making it look different in different states). This way, the functionality does not unnecessarily rely on JavaScript, and the element will look like a link to search engines.