[elm-discuss] What is the recommended way to clear a form on submit?

[Mario Sangiorgio]

I'm working on an application that has several forms, one for getting the
user credential and some other to let the user insert some data.

Having forms in multiple pages is somehow more difficult than it should
because of two known issues, both described
here https://github.com/elm-lang/html/issues/105:

- onInput and value don't interact well with each other, causing the
cursor to jump around
- the virtual dom reuses forms component, making some values I entered
in one form leak into another

What is the recommended way of doing this?

My preference would be to always set value
<http://package.elm-lang.org/packages/elm-lang/html/2.0.0/Html-Attributes#value> to
match what I have in the model. This would be clean and easy to understand
but I'm not sure how safe it's to use it. The last thing I want is some
clean code that has UX issues.

I could work around the virtual dom issues by abusing Html.Keyed, but that
feels like an hack. And it would require even more hackery to make sure
that I can reuse the same from multiple times.

Thanks,
Mario

[zeh dude]

I struggled with this a bit some time ago (had to clear some form fields on
command), and no matter which solution I tried there were unwanted side
effects that I just could not make it work with just Elm.

So what I ended up doing was use a port to use plain javascript to reset
the field values and unlink the value of the fields from the model
property.. it was the cleanest way I could find at the time and as soon as
issue 105 is fixed I can remove it easily (I can just link back the model
property to the value of the fields, and remove the command using the port).
I wouldn't say this is the recommended way, but I just wanted to share the
experience.

[Aaron VonderHaar]

I've used the mentioned "workaround" with Html.Keyed several times, and we
also use that approach on several pages at NoRedInk.

To summarize: the approach I'd personally use is the same that zwilias
suggests and shared an example of in the comments of the issue mentioned
previously: https://ellie-app.com/3fPSxX6VHK7a1/0

view model =
...
, Html.Keyed.node "div"
[ ( toString model.generation ++ "-name"
, Html.input [ Html.Attributes.defaultValue model.name ] []
)
]
, Html.button [ Html.Events.onClick Submit ] [ Html.text "Submit" ]
...

update msg model =
case msg of
ChangeName newName ->
{ model | name = newName }
Submit ->
{ model | generation = model.generation + 1, name = "" }

Post by zeh dude
I struggled with this a bit some time ago (had to clear some form fields
on command), and no matter which solution I tried there were unwanted side
effects that I just could not make it work with just Elm.
So what I ended up doing was use a port to use plain javascript to reset
the field values and unlink the value of the fields from the model
property.. it was the cleanest way I could find at the time and as soon as
issue 105 is fixed I can remove it easily (I can just link back the model
property to the value of the fields, and remove the command using the port).
I wouldn't say this is the recommended way, but I just wanted to share the
experience.
--
You received this message because you are subscribed to the Google Groups
"Elm Discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an
For more options, visit https://groups.google.com/d/optout.