materialize css button for delete not working

Question

I have the following code in my node/express file:

             {{#each allimages}}
        <div class="col m3 14">
            <div class="card hoverable">
                <div class="card-image">
                    <a href="/uploads/{{imageName}}" data-lightbox="mygallery" data-title="This is a test">
                        <img src="/uploads/{{imageName}}">
                    </a>
                </div>

                <div class="card-action2 right-align">
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light red">
                            <i class="material-icons">delete</i>
                        </button>
                    </form>
                    <form action="/user/{{id}}?_method=DELETE" method="POST">
                        <button type="submit" class="btn-floating btn waves-effect waves-light blue">
                            <i class="material-icons">edit</i>
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {{/each}}

I can see my delete button in red but when I click on it it does not delete the file. When I am using and type is set to submit it works perfectly with my route and deletes the file. How can I use the materialize css delete style to submit my delete request form?

Thanks guys for any help!

Answer 1

You need to make it a button, not an anchor. You can just add the relevant class definitions to use the styles of a Materialize button:

<div class="card-action2 right-align">
  <form action="/user/{{id}}?_method=DELETE" method="POST">
    <button type="submit" class="btn-floating btn waves-effect waves-light red">
      <i class="material-icons">delete</i>
    </button>
  </form>

  <a href="2.html">
    <i class="material-icons blue-grey-text">edit</i>
  </a>
</div>