Havardpede
Updating dom on phx-change on text input
I am working on creating a multi-page application form.
I have decided to hide the next-button until there is an answer for each question on the page.
To detect when an answer is updated, I have tried the following:
-
Attaching a
phx-blurto the inputs. This worked, but forced the user to exit the input, which wasnt intuitive enough in certain cases. -
Attaching a
phx-keyupto inputs. I could not find a way to attach a reference to indicate which input was being edited, so I could update the relevant answer. -
Wrapping the inputs in a
<form>withphx-change. This triggered the event correctly, but did not reload the DOM. I even converted the navbar into alive_component, and tried triggering a forced re-render withsend_update/2.
Do you have any ideas on how to handle this case?
Thanks in advance 
Marked As Solved
outlog
ok, did the debugging…
error is the “%” at the end of your:
<input type=“string” name=“input” value="<%= @answer %>" class=“border” %>
that breaks phoenix_live_view.js - remove that and you are good to go…
btw type=“string” is not standard https://www.w3schools.com/tags/att_input_type.asp so maybe use “text”
Also Liked
outlog
socket
|> assign(:show_button, answer != "")
|> assign(:answer, answer)
{:noreply, socket}
seems like those assigns doesn’t go on the socket/reply eg you need
socket = socket
|> assign(:show_button, answer != "")
|> assign(:answer, answer)
{:noreply, socket}
this is a bit of OOP vs FP…
socket
|> assign(:show_button, answer != "")
|> assign(:answer, answer)
is basically a noop in FP - while in OOP it would most likely have mutated “socket”
Havardpede
Oh wow yeah that was obvious. Thank you 
Popular in Questions
Other popular topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
We build reliable cloud platforms for business-critical systems.
Categories:
Sub Categories:
Forums
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.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"