Form and field events

- [Instructor] Although it is entirely possible to build a fully functional form using just CSS and HTML, there are going to be plenty of scenarios where you want to use some JavaScript to customize how your form behaves. So in this example, we'll take a brief look at some of the more useful JavaScript events that your code can listen for when working with forms. And then later in the course, we'll see how these events can help us create forms that are highly interactive, and help the user enter valid data. Let's go ahead and open up the formevents_start file. Let's scroll up to the top here. And let's go ahead and take a quick look at it in the browser. So I'll open that with my live server. And you can see it's just a bunch of testing fields to test out some of the events, we have an input field here, we have a search box, checkbox, couple of radio buttons, we have a numerical input field. Okay, so let's go ahead back to the code. All right, so let's start with the form submission event. When the user submits a form either by clicking a submit button or by typing the Enter key, the form generates a submit event. And we can listen for this event by attaching a submit event listener to our form. So let's try that first. And you can see that in the code, I already have a set of variables where I've gotten the references to each one of those items in the page. So to listen for a submit event, I can simply write theform, and I'll call addEventListener, and we're going to listen for the submit event, and then I'll just put in an arrow function here, and what we're going to do is call e.preventDefault. And you can see that the form is this variable right here where I get the element from the page. Now in this case, we're just going to prevent the submission of the form, but we can use this opportunity to perform some additional form validation which we will see later in the course. So let's go ahead and try that. So back here in the browser, I'll refresh, and you can see that the Submit button now does not do anything. All right, so we can also listen for events on individual form controls. And this is really useful because we can use these events to control other parts of the form when they happen. So let's go back to the code and let's add an event listener to our checkbox. And what we're going to listen for is the change event. So I'm going to write cb1, and I'm going to call addEventListener, and listen for the change event. And I'm just going to go ahead and log out to the console, and I'm going to use interpolated strings for this. So I'm going to write checkbox change event. And then inside my interpolated string, I'm going to write e.srcElement.checked. Okay. So the change event is fired whenever the user commits a new value to a form control such as entering new text into an input field or changing the state of a checkbox or radio button. So this code just listens for a change in the check state of the checkbox, but we can do other things too. So for example, we can use the change listener to know when the user has changed the content of a text input. So let's try that as well. So for the character count field, I'll add an event listener on the change event. And in this case, I'll have a variable called count. So we'll have count equals, and we'll get the length of the value of the field which is the text inside the input field. And then I will update the count fields value with that count, okay? And if we scroll down, you'll see that the character count field is this input. And the count field is this output elements which we saw earlier in the course, okay? So let's go ahead and save, and let's try this out. All right, and let me bring up the console so we can see what's going on. And I'll zoom that up a little bit. So when I change the checkbox, you can see there's the checkbox change event, and we can see that it is checked, and now it's not. And in the character count field, I'll input some text. You can see that the count value isn't changing yet because I haven't actually committed the change. So if I tab out of that field, you can see now that the count has been updated with the length of that text, all right? So let's go back to the code, and let's try something else. So in addition to listening to the change event, we can also listen to a input event. And the input event fires immediately whenever the content of a field is modified. Whereas the change event fires after the change is committed, input gets fired right away. So let's go ahead and copy this, and let's paste it down here, and let's change this to input. There we go. And then let's go ahead and comment this one out. All right, so now let's save and go back to the browser and let's see the difference. So now you can see that as I'm typing, now the count field is updating right away. It's not waiting for the change to be committed, okay? You can also centralize the code that handles events in the form higher up in the view hierarchy, which makes it much simpler to handle events from multiple controls in the form. And this works because many kinds of events bubble upward when they are fired on their original element. So to demonstrate this, I'm going to use a technique that uses a JavaScript class instead of a regular event handler function. So let's go back to the code, and what I'm going to do is define a class. And you can see I have a class here named formEventListener. And the constructor for this class takes a form as a parameter to the constructor, right? And in order to have this object act as an event handler, all I need to do is define a function named handleEvent that takes an event parameter just like any other event listener function would do. So I'll just write handleEvent, and I'll just console.log. And once again, I'm going to use my interpolated string and have an event. And it will be e.type. So I'll log out the type of the event on. That's going to be the source elements tag name. And then for, and I'll have that be dollar sign this.formElement.id. Okay, so let's go ahead and save. And now, up here in my code, I can create an instance of this object. So I'll have let formlistener be a new FormEventListener. And I'll pass in the form as the parameter. And then I'll set the object itself as the event listener. So I'll say the forms event listener for let's say a click event, right? Is going to be my form listener object, right? That's this class. All right, let's go ahead and comment this out, save, let's go back to the form. And then if we watch the console output, you can see that as I click on different elements, right? You can see now that the click is being handled in one central place. So by handling events using a class definition like this, it's much easier to encapsulate and parameterize your event handlers for various form controls. And we'll see a practical example of this applied later in the course.