Elm: clear form on submit

Question

I have a simple form with one field. I would like to clear the field on form submit. I am clearing my model in my update function, but text remains in the text input.

type alias Model =
    { currentSpelling : String }

type Msg
    = MorePlease

update : Msg -> Model -> ( Model, Cmd Msg )
update msg model =
    case msg of
        MorePlease ->
            (  log "cleared spelling: " { model | currentSpelling = "" }
                , fetchWord model.currentSpelling )

view : Model -> Html Msg
view model =
    div []
        [ Html.form [ onSubmit MorePlease ]
            [ input [ type' "text"
                    , placeholder "Search for your word here"
                    , onInput NewSpelling
                    , attribute "autofocus" ""
                    ] []
            , text model.currentSpelling
            , input [ type' "submit" ] [ text "submit!" ]
            ]
        ]

The text displaying model.currentSpelling clears out when I empty it with the update function, but the text input box remains populated. Any idea how to clear it?

fetchWord makes an HTTP call, but it's omitted here.

Answer 1

add value model.currentSpelling into Attributes of the input element. That's how you can control the string inside of input element in html.