How do I prevent my Delete button from triggering a form submission?

[bvobart]

Hi Elixir forum!

I have a function component to view, edit and delete an object from my database. This component obviously contains a form to perform and submit the edits that the user makes, but it also contains a Delete button to delete it, see the screenshot below.

Shortened for brevity, this is the implementation of that component:

<div class="..."> <.form for={@form} phx-change="validate-changes" phx-submit="save-changes"> <%!-- form inputs here --%> <footer class="flex justify-between items-center"> <div class="flex gap-2"> <.button variant="secondary" disabled={not changed?(@form)} phx-disable-with="..." > Save </.button> <.button {[{@return_method, @return_to}]}>Cancel</.button> </div> <.button variant="outline" class="btn-md btn-error text-error hover:text-base-100" phx-click="delete" phx-value-id={@job_request.id} data-confirm="Are you sure you want to delete this job request?" > <.icon name="hero-trash" class="size-5" /> </.button> </footer> </.form> </div> 

My problem is that whenever I click the Delete button, it not only triggers the delete event like I want it to, but it also triggers the form submission, thus causing the save-changes event to be fired as well. How do I prevent that from happening so that only the delete event gets fired?

What I’ve tried so far:

• Use phx-click with “delete”. Does not work, as described.
• Use phx-click with JS.push(“delete”) |> JS.patch(@return_to). Does not work, same problem.
• Tried putting the same props as what the Cancel button gets on the Delete button (effectively: patch={@return_to}), along with phx-click="delete". Does not work, the delete event is never triggered, only the patch is executed.
• Moved the Delete button outside of the .form component, but then I couldn’t figure out how to neatly style the button to still be positioned in the same way the screenshot shows.
• I read in the docs that phx-change can also be applied on individual elements rather than just the form, which would cause the form’s change event to be ignored and only the individual element’s change event to be fired. I thought maybe the same applies to phx-submit, but it does not: putting phx-submit=”delete” or something similar on the Delete button has no effect and the problem still persists.

Do you have any ideas for a good solution?

important to note:

• the .button component was generated by Phoenix 1.8.1 when I created the project, I merely extended the variants and made it possible to extend the classes passed down into it.
• the Cancel button works just fine and doesn’t trigger a form re-submission, because the generated .button component renders as a .link when given an href, navigate or patch prop.

[garrison]

<.button type="button">Delete</.button> 

[bvobart]

Thanks, type=button combined with phx-click={JS.push(“delete”) |> JS.patch(@return_to)} solves it! Now I feel stupid for not trying that earlier AI already gave me this answer but because type isn’t in the include list for attr :rest on the default generated button component, I thought it was just a bogus response.

For those who were just like me looking for an explanation as to why this works and is valid, see the MDN docs: <button>: The Button element - HTML | MDN

[garrison]

@bvobart

but because type isn’t in the include list for attr :rest on the default generated button component, I thought it was just a bogus response

Huh, you’re right. The docs explicitly state that the list of HTML global attributes is used but type is in there despite not being a global attribute.

That line in the docs should probably be updated!

[garrison]

Apparently someone just popped by and added it one day, probably unaware that it was “supposed” to be a list of global attributes! TBH I don’t think the idea of the list being global-only is helpful anyway, there are a number of common attributes that I hate having to put in :include every time.