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 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 = "" }

--
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 email to elm-discuss+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.