How can I submit LiveView form with data from hook elements?

You could do it in JS, but it would be a lot easier if you could just make your input elements in the DOM structured the way you need for them to submit right.

It’s a good idea for simple inputs.
But it’s not efficient when the value of input is too large and changed frequently (e.g. large HTML post from editor) or the input is complicated (e.g. multi select. I have no idea how to update it.).

Hi @nallwhy,

If you are using a sophisticated JS component (e.g. Quill, TipTap), probably the easiest way is to wire up an event handler for your Javascript component I the mount function of your liveview hook. That event handler can then push what’s needed to your liveview process using pushEvent or pushEventTo. You then need to write handle_event functions in your liveview (or live component) as normal.

This link explains it: How to connect Quill with Phoenix using Quill as an example. I used this as a reference for wiring up the TipTap editor library.

An example multi-select component for liveview is available via a library - GitHub - saleyn/phx-multi-select: Phoenix LiveView MultiSelect Component · GitHub - you could take a look in there for more inspiration on how to wire things together.

There’s another post covering the wire-up to Trix editor: