Hi there, welcome to another lesson in this video, we are going to have lots of fun because we are
going to learn how to work with forms and this is an essential skill for the web developer.
We already know how to get the value from an input field with done it a few times.
We've done it in the list of exercises.
So now in this video, we're going to learn how to do this with other food types.
So let's start with a select box.
So we have this select box that we could find on any form, on any website.
So as we can see, we have a few options here.
So how can we know which option has been selected?
So for this example, when we click the button, I want to show the options here.
So first, let's see the HTML of this element.
So the idea of this element is options.
So let's go to Visual Studio code in.
The first thing we are going to do is just creating an event for that button so we can just copy any
event that we wrote up here.
Let's try to find one.
Here it is.
I have this unclick event.
So now I'm just going to uncommented this code.
Erase everything inside and let's see what's the idea of the button.
So here's the button.
So the ID is show option.
So when we click the button.
We want to show the option, so let's start creating a variable called Select Field.
Which is going to be that element, so let's just ride document that get element by ID and the ID of
that select box is.
Options.
Now, let's create another variable for these selected option.
So now we can just use the variable we've just created, so we just selected this element and every
select box is going to have a property called.
Options.
Inside this property, we are going to have another property called Selected Index.
So before we move ahead, let's just send it to the council so we can understand what are we getting?
So let's send the selected option to the council.
So let me go to the council, I'm going to refresh the page and now I have Bech here.
If I click show, we can see that it's returning the index zero because this is the first element.
If I select the second element, then the index of the selected option is going to be one and the last
element is going to be two.
So now what do we do with it?
Let's create a third variable called Selected Value, because, after all, that's what we want.
So the selected value is just going to be our food.
Then we are going to use the options property again, and now we can get any options of a select box
by using indexes.
So we can use indexes like this, but since we have the index of the selected option, this is exactly
what we want.
So by doing this, we're able to get or to select this option.
So by doing this now, let's go step by step again.
So let's just do a consolidated log for the selected value to see what we have.
Refreshing the page, so when I click show, as you can see, it's returning the full element.
So if we need the value, we can just do selected value dot.
Value.
So then it is just going to return the hoppity one, depending on what you're doing, it's useful to
get the value.
So here it is, or if you want the text that's written inside, you can just do inner HTML.
So if we do this, we can see that now we are able to get the selected option using JavaScript, so
I'm going to select Mountain Click Show and then I'm getting the selected option.
So now, instead of sending it to the council, all we need to do is sending it here.
So we are going to send this to this element that has the idea of selected option.
So to the inner age HTML of this element, we are just going to send.
The value or the inner e-mail of the selected option?
So by doing this, let's save this, let's refresh the page.
Now, let's select any option here like City, let's click show and then we can see that we are getting
that value.
So Mt..
And beach pretty cool.
Now, if we just wanted to get the value, I just wanted to show you that you can also use the dot value
for the whole options select box.
So in this case, it is just going to return the value of the selected option.
So let's try this.
As you can see.
These are less lines of code, so let me just comment this for a second.
And now I'm just going to do document that that element by options, which is the whole select box,
and when I do value is just going to get the value of the selected option automatically.
So by doing this, let's see what's going to happen.
Let's go to the consul, so when we select an option and click show, as you can see, we can get the
value with way less lines of code.
But the downside is that we can only get that value.
We cannot get the inner HTML with this.
But I just wanted to show you that you also have this option.
So going back there, let me just.
Do the opposite.
I'm going to uncommented what we wrote before.
And I'm going to leave this here inside a comment.
Now, moving on, let's talk about radio buttons, so radio buttons are a different form feud.
So if we select this element, we can see that this is an input.
We have a type of radio, and the difference is that we don't have a parent element.
And the options inside with the radio button, every option is an input.
So as we can see, it's an input of the type radio.
So this is the other one and this is the other one.
So because of this, we are going to have to work a bit differently, so now as you can see, all of
them have the same name.
So there's an attribute called name.
So all of them have name equals gender, name and name.
So this is what we are going to use to select them.
So first, let's just see what's the idea of this button.
So the idea is show radio.
So let's go back to Visual Studio Code and copy all this.
And now it's going to be show radio for that button.
So now what we are going to do is create a variable for the.
Radio buttons.
And now we're going to use a different method to select element, which is the get element by name.
So by doing this, we get all the elements that we have that name attribute.
So the name we are trying to get is the.
Gender.
Now, as always, let's just do console that log to see what are we getting with this radio variable.
So refreshing the page, let me go to the council here, and when I click this button, as you can see,
we just got an array with three elements because we have three elements with the same name on our page.
Pretty cool.
Now we know that we can use a loop to run through all these elements.
So going back to the code.
Now, what we need to do.
It's just creating a variable that will be undefined for now is just going to be the radio selected,
which we don't know which one is it yet?
And now we are just going to start a loop, so for.
A equals zero, then A has to be less than radio.
That length, which we know it's three, because we have three elements.
A plus plus now we're going inside this loop, and what we need to do is every time we have an input
with the type radio, there's a property called checked that returns true if that button is checked.
So we can just do if.
Radio.
With an index of a because we are running through all these radio buttons, so if this element has the
property checked set to true, then we are going inside here.
And when we go inside here, we can just do.
Radio selected equals.
This element that has this property set to true, so if we do this, let's refresh this, let let's
do a consolidated log to see what we have when we do this.
So radio selected.
And now one thing is that when we use the same names, so e-mail is going to automatically limit just
one selection at a time, so we cannot select multiple elements when we have check boxes like I'm going
to show in the next example, we can check multiple elements, but we have radio buttons.
We can only check one.
And this is done automatically because we just said the same names for each of them.
So when we click show, it's just going to run through all these elements.
And when it finds one that has the checked property set to true, it's just going to send it to the
council.
So when we do this, it's just sending this element that has the value of mail.
So let's try with female.
Now, when we click show, we can see that this property is actually an attribute.
So every time a radio button is checked, it has this attribute which we can access as a property.
So now that we know that we can access this element, how do we get its value?
Well, that's pretty simple.
We have a value here so we can just do radio selected DOT.
Value.
So by doing this, let's try this one this time, let's click show, and now we are just getting the
value.
So now we can send it to this element here.
So this element is going to be the selected radio.
So we are sending the value of the checked.
Where the selected radio button to this selected radio element, so saving this.
Let's refresh the page.
And try again, so we have mail, let's show we are just sending the option here, female.
And I'd rather not inform.
So, as you can see, we are able to identify which one is checked and getting the value.
Now, this video is getting a bit too long, so I'm just going to break it into two.
And in the next part, we're going to learn how to work with check boxes.
So I'll wait for you in the next video.