Hey, everyone, in this video, we're going to continue working with the forms, but now instead of
sending the selected option only when clicking the button, let's try to track a change event.
So any time we change the option, we are going to send the updated value to this element.
So to do this, let's just copy this first example from the previous lesson, which is using.
A select box.
So here it is.
Let me just uncommented this.
So let's get the idea of this select box.
Which is education level.
I'm just going to copy this so now.
Instead of tracking a click event to a button, we are just going to select that select box and the
event that we are going to track is going to be the on.
Change event, so before we continue, I'm just going to comment all this and I'm going to do cancel
that log.
Change it just so we can understand how this works, so I'm going to save this.
Refreshing the page, so now nothing is going on, but every time we change the option here, we can
see that we are sending this message to the council.
So we are firing that event.
Let's try to change it again.
So now we just send the message one more time.
So every time we do this, our function is going to be executed.
So now, instead of just doing console dialogue, we can do the same thing we did before, which is
sending the value to that element.
So as you can see, this is pretty simple.
This is pretty much what we've done before.
But instead of using an unclick event to a button, we are just using the on change event to the select
box.
So now the idea of the elements that we want to get is the education level.
So it's the same element that is the select few.
And then the rest is going to be the same, just the element where we want to show the result is going
to be different.
So here we have an element with the idea of selected level.
So changing it here.
So let's do a recap, we are just selecting that select box element, then we are getting the selected
index.
We have this through the options property inside the selected index property.
Then we are just selecting this whole element and getting its inner HDMI out.
So by doing this.
Refreshing the page every time we change this, we're going to automatically send the selected value
to this element.
So let's try again and again.
So as you can see, this is working perfectly.
So why would we want to do this?
Well, let's say we have a sales page, so let's go to our post website.
I've showed you this in the first lesson of the course, let's see it again, so I'm just going to click
buy to start buying this phone.
And as you can see, we have a few options here.
So here we have the squares.
But consider them to be an input field.
So this could be a dropdown like the select box we have.
This could be radio buttons or select boxes.
So any time there's a change.
So I'm selecting this, something is happening.
We don't have to click an outside button.
We don't have to select the option we want and then click a button.
We just need to select an option and it is automatically changing the product photo.
So this is exactly what we are doing here, any time we change the option, we are doing something here.
In this case, instead of just sending these selected option to this element, we could be getting a
photo, getting the price of the product or anything like this.
So the other examples are going to be the same.
I just want to show you one more example using the check boxes, because let's remember that these are
individual elements.
So it's going to be similar.
But the only difference is that we are going to have to start a loop and add that on change events to
each of these elements.
So let's get started with this.
So first of all, let's select all these elements, so let's go in to create a variable called check.
And then I'm going to select.
All the elements, but it's going to be by their names, so if we click on one of these options, we
can see that all of them has a name of Neo.
So meow, meow, meow.
So get elements by name.
And the name is MUE.
Now we are going to start a loop.
So, again, a.
VA a equals zero, a house has to be smaller than check.
Dot.
Lenth, so check is going to be the array of elements, the array of options we have.
And eight plus plus.
So what we want to do when we enter this loop, we just want to set that event for each of these elements.
So when we enter this loop, we are just going to get check.
We have an index of a.
So let's remember that each of the elements of this array are our age GML elements, so we can just
select them by doing this and then applying the on change event.
So let's start a function.
And before we go ahead again, let's do something so we can see what's going on, so console that log
first, let's just send a generic message, so.
Changed.
Let's refresh the page and let me go to the console, so every time we make a change, so I'm going
to check Hamberger, we can see that it's changed.
And when I uncheck this, it's also going to fire that function.
So checking on checking, it's just calling the on change event.
Same thing for the second one.
Same thing for the third one.
So now what do we need to do?
Let's go back there.
So every time there's a change in any of the elements, we are just going to get the inner turmoil of
that element.
So let's go back there.
So here is going to be a list because we can select multiple items at the same time.
So we have this selected check element.
So now the inner age HTML of this parliament, we are going to start this with.
And unordered list again.
So every time there's a change on any of the elements, we are just going to erase all the inner turmoil
of this element and we are going to start fresh with an unordered list.
And after we finish the loop.
We can just close our unordered list, but this time using the incremental operator, so plus equal
in this time we are just.
Closing the list, so inside here, what we need to do is sending to the list only the options that
are select.
So how do we do this?
We are going to have to start another loop.
So here, let's start a for loop.
And why are we using nested loops?
Well, because this first loop is only setting the on change event.
So by doing this, any element that changes is going to fire this function because we are applying the
change to each of these elements.
This is why we needed this loop.
But now inside here is different because now when any of these elements change, we are going to have
to run a loop again through each of these elements to check which of them are selected.
So now if we use the variable A here, we are going to have a conflict, because even though this for
loop is inside a function, this variable here is in the global scope.
So inside here, we are going to have access to this variable and there's going to be a conflict.
So here we should use a different variable name.
So let's use B, so var B equals zero.
B has to be smaller than check.
Not length and B plus plus.
So now we are just going to run through each of the elements and when we find one of them with that
checked attribute.
So if.
Check.
With an index of B.
Has that checked?
And tribute, then we are going to do something and what we are going to do is just.
Upending some e-mail to that element.
So we are going to open a list item, so we're going to start it here and now we can just add check
be.
That value, don't forget the plus sign so we can concatenate and then after doing this, we can just
close.
The list item, so let's do a recap, may just reduce the font just so we can see the whole code for
all those check boxes.
They are individual inputs.
So we are running a loop so we can set the on change event to all of them.
So here we are setting the on change event for all of them.
And any time any of these elements change, we're going to run through them and check each of them have
the attribute of checked and the ones that do.
We are going to add their values to a list item.
We are going to send this list item to that age HTML element called Select the Check where we are printing
the results.
So if we save this and go back to the page now, we can see that any change we do.
So let's try Hamberger.
We are just creating a list item.
Remember that any change we do if now I select Frys, I'm not just adding Frys.
If any change happens, we are just starting over.
So we are just scanning the e-mail of this element and starting an empty list.
And then checking all these elements again, this is why we need another loop, so any time there's
a change, we are just going to run through each of these elements.
So the first element is this one.
So this element has the exact attributes because it's checked, so if this happens, we are going to
send its value to this list.
So let's do it again.
Do it again.
Now, every time we change anything, we are starting over and building this list again.
So that was all that I wanted to show for now, I know this is getting a bit more complex than what
we've been doing so far.
Now we are not only interacting with age HTML elements, but these elements are form fuds and they have
values.
Some of them are separate input fields.
But the CELAC box is just one parent element with options.
So I know this is a little complicated, but it just takes a bit of time to get used to this.
When you start working with JavaScript for real, you are going to work with forms a lot of times.
So this is going to be very easy for you.
Like I said, if you need just watch this video again, watch the previous one again and use the Q&A
section.
If you have questions in the next list of exercises, I'm going to put some more examples with forms
so you will have a lot of opportunities to practice.
So that was all for now.
I'll see you in the next video.