This Lesson is for Members

Subscribe today and get access to all lessons! Plus direct HD download for offline use, enhances transcripts, member comment forums, and iTunes "podcast" RSS feed. Level up your skills now!

Unlock This Lesson

Already subscribed? Sign In

Autoplay

    Change an Elm Form's State in Reaction to the State of an HTTP Request

    Enrico BuonannoEnrico Buonanno

    Following the same approach as in the previous lesson, we manage the state of the form in response to the status of the remote request. Namely, the submit button needs to be disabled while the request is in process, and the form needs to be cleared when we receive a success response.

    elmElm
    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Transcript

    Transcript

    Instructor: 00:00 There are a few more things we need to do in response to the form changing status. For one thing, we would like to disable the Submit button while the request is being submitted. This is in order to avoid, for example, the user clicking on Submit twice. We just say "disabled." This should be disabled whenever the status is in process.

    00:29 To do this, I need to pass the model into the footer function. Our improvement is that upon successfully submitting the form, we would like to clear the fields email and message. We can do this in the update function. We change the model to not only have a state of succeeded, but we also change email to be empty and message to be empty as well.

    01:06 Let me test this here. Let me start the server. If I click Submit, this succeeded. You can see that the model has changed, but these values are still visible in the view. We need to update view to also read from the model both email and textarea.

    01:33 I pass the model to the body and try this again. Now you can see that the submission was successful and that the email and message fields have been cleared. I will say that apart of the CSS styling, which is clearly missing, in terms of the behavior of the form, the form is behaving well.

    Discuss

    Discuss