Welcome. There’s a lot to cover here but for a start: you don’t “access” the value like you would do with vanilla Javascript.
Instead you attach a onInput event to the textfield, which in turn will generate a custom Msg, say SetUrl, which as a payload will carry the most recent textfield value. In update you store such value in the model.
Then, I would suggest to attach onSubmit event the form (instead of that div you have) so you can handle the submit-by-enter behaviour. This too will generate another custom Msg, that Start you have already, which will trigger in your update the loading mentioned in your post.
Your question around the update was already answered, so I’ll take on the second part:
Everything that changes during the life of an elm Application must be stored in the Model. Which means every Input must be reflected in the Model. In order to do this, you should probably change your model to something that can hold both your loading state and your username/password, because you can only have one Model.
type LoadingState
= Failure
| Start
| Loading
| Success (List Metric)
type alias Model =
{ name : String
, password : String
, passwordAgain : String
, loadingState: LoadingState
}
I have ended up with the following which works great for me right now:
update : Msg -> Model -> (Model, Cmd Msg)
update msg model =
case msg of
SetUrl url ->
(GotUrl url, Cmd.none)
GetData url->
(Loading, getData url)
GotData result ->
case result of
Ok data ->
(Success data, Cmd.none)
Err _ ->
(Failure, Cmd.none)
-- VIEW
view : Model -> Html Msg
view model =
div []
[ searchBar model
, viewData model
]
searchBar: Model -> Html Msg
searchBar model =
case model of
GotUrl url ->
div []
[ input [ type_"text", placeholder "URL", value url, onInput SetUrl] []
,button [ onClick (GetData url) ,style "display" "block" ] [ text "Get Data" ]
]
_ ->
div []
[ input [ type_"text", placeholder "URL", value "", onInput SetUrl] []
]