Trying to put a button into a link

Question

I have a clickable span, which has a button in it. I want the span to go to one href and the button to another. Here is the code I currently have:

<script>
function deleteAlbum(url) {
    var txt;
    var r = confirm("Do you really want to delete this album?");
    if (r == true) {
        window.location.href = url;
    } 
    document.getElementById("demo").innerHTML = txt;
}
</script>    

<a href='gallery.php?album=16022015NewTest'>
    <span class='album'>
        <p>New Test</p>
        <p>16/02/2015</p>
        <button class='delete' onClick=deleteAlbum('gallery.php?delete_album=16022015NewTest')>
            Delete Album
        </button>
    </span>
</a>

Anyone have any ideas?

please post your css. also, by clickable span, do you mean the `a` tag? Seems odd to have a clickable element inside a `a` tag, you'll need to prevent the defautl action of the 'a' tag when a better approach would be to wrap just the `p` tags in the `a` — atmd, Feb 16 '15 at 14:15
This wouldn't work, the entirety of the span (essentially a box) is the link, making just the p elements the link would defeat the whole purpose of the exercise! — leicstbn, Feb 17 '15 at 15:35

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

You want to read up on event bubbling - the quirksmode explanation in that answer is very nice.

Here's one possible fix for your example:

<script>
function gotoAlbum(albumId) {
  window.location.href="gallery.php?album="+albumId;
}

function deleteAlbum(e, url) {
  var r = confirm("Do you really want to delete this album?");
  if (r == true) {
    window.location.href = url;
  } 
 e.stopPropagation();
}
</script>    


<span class='album' onClick="gotoAlbum('16022015NewTest');" >
  <p>New Test</p>
  <p>16/02/2015</p>
  <button class='delete' onClick="deleteAlbum(event, 'gallery.php?delete_album=16022015NewTest');">Delete Album</button>
</span>

Aside: as the other comments mention, a button inside an anchor is odd - it's not compliant HTML5 - see this question

score 1 · Answer 2 · answered Feb 16 '15 at 14:36

1

You don't. Don't put <button> inside <a>.

answered Feb 16 '15 at 14:36

Henrik · Answer 3 · 2015-02-16T15:25:53.990

According to atmd's comment restructure your html: Don't put button inside a. To be html conform use quotes for attribute values:

<div class="album">
    <a href="gallery.php?album=16022015NewTest">
        <p>New Test</p>
        <p>16/02/2015</p>
    </a>
    <button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>

So the a tag does not include the button tag. It is also a good idea not to have block elements inside inline elements. The span tag has already been changed to a div tag. You might also change the p tags to span. Then the html looks like this:

<div class="album">
    <a href="gallery.php?album=16022015NewTest">
        <span>New Test</span>
        <span>16/02/2015</span>
    </a>
    <button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>

Trying to put a button into a link

3 Answers3