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.
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.
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…