HowTo have a LiveView form with more than one button

Phoenix Forum Questions / Help
1

Even though I found several discussions on this forum about this subject, none appears to provide a clean solution to the problem.
I think is pretty normal to have a form, and two or more buttons at the bottom, such as OK, Cancel, or Clear.
But the Phoenix Form appears to favor having one button that triggers the form and send it to the server.

If I put a couple of buttons in the form, with phx-click, then the form fields are not sent to the server event handler.
The alternative, if I understand correctly, is to have phx-change on the form, and keep track on the server where I am standing until I get one of the available buttons (Ok, Cancel, Clear).

Is my understanding correct? Is there any other strategy?

Thanks,
Gusti.

2

LiveView doesn’t make special consideration for the form buttons. Browsers treat the input type for buttons inside a form as submit by default. So you need to add <button type="button">... to avoid submitting the form.

7 Likes
3

Elaborating on this, the type="button" prevents the callback of the form to be invoked twice. Don’t miss it like I did for the last half an hour

2 Likes