Sanjibukai
Phx-change on input themselves
Hello everybody,
I have a form with many inputs..
One of those inputs (for example a date or a quantity) affects for example a total price. I wanted to display that estimated price only when the inputs related to the price are changing.
Using phx-change at the form level will trigger so many events because of all the other inputs (I don’t even think for textarea being typed) and I don’t want that. And using debounce will make me lose the reactivity I want for the only fields related to the total.
Using phx-blur on those input works, but the user needs to leave those input fields which may not occurs immediately particularly when using for example the built-ins arrows for numeric input fields, or when manipulating the built-ins calendars.
Am I the only one who don’t understand why phx-change doesn’t apply for inputs themselves only?
If I should bring some JS in order to do that, I lose the main purpose of why I want to use Live View…
Anyway, is there some kind of workaround I can do?
I thought of making many little forms (at least for the fields participating to the total), but I’m using a changeset.
Currently, when I’m using phx-blur, I’m updating the changeset in which there is both the total and the related quantity or date fields. So upon the render, I have nothing to do.
So I want to keep the whole changeset based form.
I even tried to nest the inputs field within a bare <form phx-change> ... </form>..
But indeed it’s not correct HTML, and the form doesn’t even display in the source..
Marked As Solved
sfusato
The debounce is set per input. For the inputs that you want to ignore for the phx-change action, set it to blur and have the handle_event callback pattern match those (or pattern match those you’re interested in instead and have a catch-all that ignores everything else) and simply return the unmodified socket in that case.
Also Liked
sfusato
You can pattern match based on the input that triggered the phx-change action.
For example, if the following input triggered a change event:
<input name="user[username]"/>The server’s handle_event/3 would receive a payload:
%{"_target" => ["user", "username"], "user" => %{"username" => "Name"}}
Then you can have the following callbacks defined:
def handle_event("phx_change_action", %{"_target" => ["user", "username"], "user" => %{"username" => username}}, socket) do
... handle logic when username is changed
end
def handle_event("phx_change_action", %{"_target" => ["user", "quantity"], "user" => %{"quantity" => quantity}}, socket) do
... handle logic when quantity is changed
end
…and so on…
You can achieve a per input change like this. The idea is that you are not forced into only one handle_event callback. You can achieve the level of granularity that you wish by simply pattern matching on the payload.
Last Post!
Sanjibukai
I forgot (or even didn’t really notice) the blur option.
Indeed, this way, I was able to get the behavior I want..
Thanks for the insight..
Now I can ditch all that spaghetti JS I wrote 
Popular in Discussions
Other popular topics
Latest Phoenix Threads
Chat & Discussions>Discussions
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #elixirconf-us
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"