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

    Handle Click Events in an Elm Form

    Enrico BuonannoEnrico Buonanno

    Handling click events in Elm is easy, but is somewhat complicated by the default behaviour of HTML5 buttons within forms. Here you see how to override this default behaviour by using the onSubmit function.

    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:01 Now I'd like to react to clicks on the Submit button. I already have a message of type "submit," but this is not being raised anywhere. My first attempt could look something like this.

    00:14 I would import the onClick function from the Html.Events package. Then, when my "view" is being populated, I would go to the Submit button. In its attributes, I will say that on "click" I would like the form to raise the "Submit" message. The effect of this is that when the user clicks on Submit, Elm will call the update function with the message of "Submit."

    00:52 To see if this works, let me make some changes to the model. I'm going to say that the model changes to have a submitting flag set to True. I'm going to add that to the structure of my model, submitting of type "Bool." In the initial model, we have submitting set to False. If I load this in the browser, what I would expect is that when I click Submit, this submitting flag should change to True.

    01:34 What has happened in reality is that the whole page has been reloaded. You can see all of my page has been retrieved. Submitting, as a result, is false because we've effectively reloaded the whole Elm application. The reason for this is that my Submit button is within a form. The default behavior of a Submit button is to reload the whole page.

    01:57 How could I prevent this? Firstly, it's worth keeping in mind that this is only true for forms. If I was using a normal div here instead of a form -- let me save this -- then you can see that when I click Submit, this changes to True. There's no reload.

    02:13 However, you might still like to use a form for a variety of reasons, for example, because you're using a CSS library to render elements within the forms in a different way.

    02:23 Another way to go about this would be to tell the form that this is not a Submit button, but it's just a normal button. The way you do this is by saying that the type of this button is button, so just a regular button. If I save this, again, you see that the behavior is as expected, so it's not reloading the page.

    02:46 The other option -- and that's probably the best option -- is to leave the default button type of "submit" and, instead of handling the click event here, handle the submit event on the form. Let's additionally import the onSubmit function. Then, in the attributes of the form, we can say, "onSubmit create the 'Submit' message." Let me save this. This now works as expected.

    03:21 Keep in mind, however, that any button that you add to a form by default will have type "submit." For example, if I now add a Cancel button, and if I now click on the Cancel button, notice that this has also caused submitting to go to True.

    03:46 To fix this, let's change the type of the Cancel button to be just button. Let me try this. If I click Cancel, nothing happens. If I click Submit, submitting has gone to True.

    04:01 The important thing to keep in mind is that when you add a button to a form, any button, by default, its type will be "submit." This will cause the form to reload. When you use the onSubmit function on the form, this will override this default behavior.

    Discuss

    Discuss