A phx-click event inside a form emits the phx-submit event of the form

Phoenix Forum Questions / Help
,
1

Here is the HEEx template of a Phoenix.LiveComponent :

     <form phx-submit="edit_line">

        <button phx-click="add_field" phx-target={@myself}>add_field</button>

          <button type="submit">submit</button>
      </form>

When clicking on the button add_field , the handle_event “edit_line” of the parent live_view is called.
Moving the add_field button after the form closing tag makes everything work.

Is it a normal behavior ?
Something like any event (might be a press key event) coming from inside a form will be considered as a phx-submit event ?

Thank you.

2 Likes
2

The default type of button is “submit”. Just add type=“button” and it should work as you expect.

10 Likes
3

For clarity, this the HTML standard behavior, not specifically related to Phoenix. Any <button> inside a form is considered by default a submit button by the browser, unless another type is specified explicitly.

The solution is what @bartblast wrote: specify explicitly type="button".

6 Likes