1
00:00:09,130 --> 00:00:15,040
Hi there, welcome to another lesson in this video, we are going to have lots of fun because we are

2
00:00:15,040 --> 00:00:20,910
going to learn how to work with forms and this is an essential skill for the web developer.

3
00:00:21,160 --> 00:00:26,650
We already know how to get the value from an input field with done it a few times.

4
00:00:26,650 --> 00:00:28,890
We've done it in the list of exercises.

5
00:00:29,110 --> 00:00:34,260
So now in this video, we're going to learn how to do this with other food types.

6
00:00:34,570 --> 00:00:37,540
So let's start with a select box.

7
00:00:37,780 --> 00:00:45,360
So we have this select box that we could find on any form, on any website.

8
00:00:45,550 --> 00:00:48,910
So as we can see, we have a few options here.

9
00:00:49,060 --> 00:00:52,960
So how can we know which option has been selected?

10
00:00:53,770 --> 00:00:59,350
So for this example, when we click the button, I want to show the options here.

11
00:00:59,530 --> 00:01:02,920
So first, let's see the HTML of this element.

12
00:01:03,160 --> 00:01:06,580
So the idea of this element is options.

13
00:01:06,820 --> 00:01:09,730
So let's go to Visual Studio code in.

14
00:01:09,730 --> 00:01:18,760
The first thing we are going to do is just creating an event for that button so we can just copy any

15
00:01:18,760 --> 00:01:20,770
event that we wrote up here.

16
00:01:20,950 --> 00:01:22,300
Let's try to find one.

17
00:01:22,720 --> 00:01:23,470
Here it is.

18
00:01:24,220 --> 00:01:26,260
I have this unclick event.

19
00:01:30,500 --> 00:01:34,940
So now I'm just going to uncommented this code.

20
00:01:36,820 --> 00:01:41,570
Erase everything inside and let's see what's the idea of the button.

21
00:01:42,040 --> 00:01:43,350
So here's the button.

22
00:01:43,780 --> 00:01:46,030
So the ID is show option.

23
00:01:48,560 --> 00:01:50,330
So when we click the button.

24
00:01:51,880 --> 00:01:57,500
We want to show the option, so let's start creating a variable called Select Field.

25
00:01:59,820 --> 00:02:08,070
Which is going to be that element, so let's just ride document that get element by ID and the ID of

26
00:02:08,070 --> 00:02:09,840
that select box is.

27
00:02:10,940 --> 00:02:11,720
Options.

28
00:02:15,260 --> 00:02:18,980
Now, let's create another variable for these selected option.

29
00:02:20,310 --> 00:02:27,300
So now we can just use the variable we've just created, so we just selected this element and every

30
00:02:27,300 --> 00:02:31,350
select box is going to have a property called.

31
00:02:32,260 --> 00:02:33,100
Options.

32
00:02:34,630 --> 00:02:41,680
Inside this property, we are going to have another property called Selected Index.

33
00:02:43,970 --> 00:02:50,860
So before we move ahead, let's just send it to the council so we can understand what are we getting?

34
00:02:51,050 --> 00:02:54,980
So let's send the selected option to the council.

35
00:02:58,370 --> 00:03:03,790
So let me go to the council, I'm going to refresh the page and now I have Bech here.

36
00:03:04,100 --> 00:03:10,760
If I click show, we can see that it's returning the index zero because this is the first element.

37
00:03:12,430 --> 00:03:20,680
If I select the second element, then the index of the selected option is going to be one and the last

38
00:03:20,680 --> 00:03:22,780
element is going to be two.

39
00:03:23,110 --> 00:03:25,240
So now what do we do with it?

40
00:03:29,880 --> 00:03:36,480
Let's create a third variable called Selected Value, because, after all, that's what we want.

41
00:03:37,520 --> 00:03:40,850
So the selected value is just going to be our food.

42
00:03:45,200 --> 00:03:54,470
Then we are going to use the options property again, and now we can get any options of a select box

43
00:03:54,470 --> 00:03:55,940
by using indexes.

44
00:03:57,050 --> 00:04:04,970
So we can use indexes like this, but since we have the index of the selected option, this is exactly

45
00:04:04,970 --> 00:04:05,870
what we want.

46
00:04:06,200 --> 00:04:11,430
So by doing this, we're able to get or to select this option.

47
00:04:11,750 --> 00:04:15,340
So by doing this now, let's go step by step again.

48
00:04:15,350 --> 00:04:21,620
So let's just do a consolidated log for the selected value to see what we have.

49
00:04:24,650 --> 00:04:31,180
Refreshing the page, so when I click show, as you can see, it's returning the full element.

50
00:04:31,490 --> 00:04:37,400
So if we need the value, we can just do selected value dot.

51
00:04:39,620 --> 00:04:40,280
Value.

52
00:04:42,140 --> 00:04:48,620
So then it is just going to return the hoppity one, depending on what you're doing, it's useful to

53
00:04:48,620 --> 00:04:49,640
get the value.

54
00:04:51,950 --> 00:04:59,000
So here it is, or if you want the text that's written inside, you can just do inner HTML.

55
00:05:04,090 --> 00:05:11,290
So if we do this, we can see that now we are able to get the selected option using JavaScript, so

56
00:05:11,290 --> 00:05:16,960
I'm going to select Mountain Click Show and then I'm getting the selected option.

57
00:05:16,990 --> 00:05:21,430
So now, instead of sending it to the council, all we need to do is sending it here.

58
00:05:24,290 --> 00:05:31,160
So we are going to send this to this element that has the idea of selected option.

59
00:05:43,700 --> 00:05:49,220
So to the inner age HTML of this element, we are just going to send.

60
00:05:50,470 --> 00:05:54,730
The value or the inner e-mail of the selected option?

61
00:05:55,830 --> 00:05:59,850
So by doing this, let's save this, let's refresh the page.

62
00:06:00,970 --> 00:06:07,540
Now, let's select any option here like City, let's click show and then we can see that we are getting

63
00:06:07,540 --> 00:06:08,920
that value.

64
00:06:09,280 --> 00:06:10,210
So Mt..

65
00:06:11,160 --> 00:06:13,440
And beach pretty cool.

66
00:06:15,140 --> 00:06:23,060
Now, if we just wanted to get the value, I just wanted to show you that you can also use the dot value

67
00:06:23,060 --> 00:06:25,760
for the whole options select box.

68
00:06:25,970 --> 00:06:32,180
So in this case, it is just going to return the value of the selected option.

69
00:06:32,420 --> 00:06:33,890
So let's try this.

70
00:06:35,290 --> 00:06:36,340
As you can see.

71
00:06:38,230 --> 00:06:45,970
These are less lines of code, so let me just comment this for a second.

72
00:06:48,760 --> 00:06:55,450
And now I'm just going to do document that that element by options, which is the whole select box,

73
00:06:55,660 --> 00:07:01,170
and when I do value is just going to get the value of the selected option automatically.

74
00:07:01,300 --> 00:07:04,720
So by doing this, let's see what's going to happen.

75
00:07:05,940 --> 00:07:13,800
Let's go to the consul, so when we select an option and click show, as you can see, we can get the

76
00:07:13,800 --> 00:07:16,680
value with way less lines of code.

77
00:07:17,040 --> 00:07:20,480
But the downside is that we can only get that value.

78
00:07:20,520 --> 00:07:24,120
We cannot get the inner HTML with this.

79
00:07:24,570 --> 00:07:28,400
But I just wanted to show you that you also have this option.

80
00:07:28,980 --> 00:07:31,140
So going back there, let me just.

81
00:07:35,300 --> 00:07:36,480
Do the opposite.

82
00:07:36,500 --> 00:07:40,160
I'm going to uncommented what we wrote before.

83
00:07:42,000 --> 00:07:46,170
And I'm going to leave this here inside a comment.

84
00:07:48,430 --> 00:07:55,800
Now, moving on, let's talk about radio buttons, so radio buttons are a different form feud.

85
00:07:56,020 --> 00:08:01,150
So if we select this element, we can see that this is an input.

86
00:08:01,300 --> 00:08:07,300
We have a type of radio, and the difference is that we don't have a parent element.

87
00:08:07,300 --> 00:08:13,300
And the options inside with the radio button, every option is an input.

88
00:08:13,450 --> 00:08:17,540
So as we can see, it's an input of the type radio.

89
00:08:17,710 --> 00:08:21,490
So this is the other one and this is the other one.

90
00:08:23,070 --> 00:08:29,880
So because of this, we are going to have to work a bit differently, so now as you can see, all of

91
00:08:29,880 --> 00:08:31,700
them have the same name.

92
00:08:31,950 --> 00:08:34,530
So there's an attribute called name.

93
00:08:34,710 --> 00:08:39,910
So all of them have name equals gender, name and name.

94
00:08:40,200 --> 00:08:43,420
So this is what we are going to use to select them.

95
00:08:43,920 --> 00:08:47,820
So first, let's just see what's the idea of this button.

96
00:08:48,150 --> 00:08:50,420
So the idea is show radio.

97
00:08:50,880 --> 00:08:54,570
So let's go back to Visual Studio Code and copy all this.

98
00:09:00,280 --> 00:09:04,270
And now it's going to be show radio for that button.

99
00:09:07,550 --> 00:09:11,300
So now what we are going to do is create a variable for the.

100
00:09:12,380 --> 00:09:14,030
Radio buttons.

101
00:09:15,450 --> 00:09:23,690
And now we're going to use a different method to select element, which is the get element by name.

102
00:09:23,910 --> 00:09:28,530
So by doing this, we get all the elements that we have that name attribute.

103
00:09:28,800 --> 00:09:32,190
So the name we are trying to get is the.

104
00:09:33,470 --> 00:09:34,070
Gender.

105
00:09:39,540 --> 00:09:46,710
Now, as always, let's just do console that log to see what are we getting with this radio variable.

106
00:09:50,030 --> 00:09:57,350
So refreshing the page, let me go to the council here, and when I click this button, as you can see,

107
00:09:57,350 --> 00:10:05,200
we just got an array with three elements because we have three elements with the same name on our page.

108
00:10:05,630 --> 00:10:06,200
Pretty cool.

109
00:10:06,230 --> 00:10:10,890
Now we know that we can use a loop to run through all these elements.

110
00:10:11,480 --> 00:10:13,160
So going back to the code.

111
00:10:15,650 --> 00:10:17,450
Now, what we need to do.

112
00:10:18,690 --> 00:10:26,370
It's just creating a variable that will be undefined for now is just going to be the radio selected,

113
00:10:26,670 --> 00:10:29,840
which we don't know which one is it yet?

114
00:10:31,350 --> 00:10:34,530
And now we are just going to start a loop, so for.

115
00:10:38,670 --> 00:10:46,680
A equals zero, then A has to be less than radio.

116
00:10:47,590 --> 00:10:52,330
That length, which we know it's three, because we have three elements.

117
00:10:53,660 --> 00:11:01,250
A plus plus now we're going inside this loop, and what we need to do is every time we have an input

118
00:11:01,280 --> 00:11:10,010
with the type radio, there's a property called checked that returns true if that button is checked.

119
00:11:10,490 --> 00:11:12,440
So we can just do if.

120
00:11:16,790 --> 00:11:17,510
Radio.

121
00:11:19,420 --> 00:11:26,920
With an index of a because we are running through all these radio buttons, so if this element has the

122
00:11:26,920 --> 00:11:32,560
property checked set to true, then we are going inside here.

123
00:11:34,250 --> 00:11:37,880
And when we go inside here, we can just do.

124
00:11:39,900 --> 00:11:42,510
Radio selected equals.

125
00:11:49,420 --> 00:11:57,940
This element that has this property set to true, so if we do this, let's refresh this, let let's

126
00:11:57,940 --> 00:12:02,230
do a consolidated log to see what we have when we do this.

127
00:12:02,560 --> 00:12:04,060
So radio selected.

128
00:12:09,810 --> 00:12:18,720
And now one thing is that when we use the same names, so e-mail is going to automatically limit just

129
00:12:18,720 --> 00:12:26,940
one selection at a time, so we cannot select multiple elements when we have check boxes like I'm going

130
00:12:26,940 --> 00:12:32,580
to show in the next example, we can check multiple elements, but we have radio buttons.

131
00:12:32,580 --> 00:12:33,930
We can only check one.

132
00:12:34,110 --> 00:12:39,070
And this is done automatically because we just said the same names for each of them.

133
00:12:39,750 --> 00:12:44,160
So when we click show, it's just going to run through all these elements.

134
00:12:44,730 --> 00:12:51,390
And when it finds one that has the checked property set to true, it's just going to send it to the

135
00:12:51,390 --> 00:12:51,930
council.

136
00:12:52,080 --> 00:12:58,310
So when we do this, it's just sending this element that has the value of mail.

137
00:12:58,440 --> 00:13:00,180
So let's try with female.

138
00:13:00,180 --> 00:13:05,700
Now, when we click show, we can see that this property is actually an attribute.

139
00:13:05,910 --> 00:13:13,920
So every time a radio button is checked, it has this attribute which we can access as a property.

140
00:13:14,840 --> 00:13:20,570
So now that we know that we can access this element, how do we get its value?

141
00:13:20,600 --> 00:13:21,900
Well, that's pretty simple.

142
00:13:21,920 --> 00:13:26,780
We have a value here so we can just do radio selected DOT.

143
00:13:28,090 --> 00:13:28,690
Value.

144
00:13:32,150 --> 00:13:38,870
So by doing this, let's try this one this time, let's click show, and now we are just getting the

145
00:13:38,870 --> 00:13:39,270
value.

146
00:13:39,290 --> 00:13:42,200
So now we can send it to this element here.

147
00:13:43,810 --> 00:13:47,470
So this element is going to be the selected radio.

148
00:14:08,540 --> 00:14:11,600
So we are sending the value of the checked.

149
00:14:12,800 --> 00:14:20,390
Where the selected radio button to this selected radio element, so saving this.

150
00:14:22,710 --> 00:14:24,330
Let's refresh the page.

151
00:14:25,530 --> 00:14:32,640
And try again, so we have mail, let's show we are just sending the option here, female.

152
00:14:34,320 --> 00:14:36,180
And I'd rather not inform.

153
00:14:36,930 --> 00:14:43,290
So, as you can see, we are able to identify which one is checked and getting the value.

154
00:14:43,920 --> 00:14:48,450
Now, this video is getting a bit too long, so I'm just going to break it into two.

155
00:14:48,450 --> 00:14:52,800
And in the next part, we're going to learn how to work with check boxes.

156
00:14:52,800 --> 00:14:54,810
So I'll wait for you in the next video.