materialize css button for delete not working - css

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>