1
00:00:09,200 --> 00:00:15,440
Hey, everyone, earlier in the course, we learn how to work with different types of form feuds with

2
00:00:15,440 --> 00:00:16,310
JavaScript.

3
00:00:16,610 --> 00:00:19,940
Now let's see how we can do the same thing using J.

4
00:00:19,980 --> 00:00:20,510
Querrey.

5
00:00:20,960 --> 00:00:29,440
So let's start by the vol method, which is used to get or change the value of farm fields.

6
00:00:29,840 --> 00:00:31,520
So here I have an input.

7
00:00:31,790 --> 00:00:34,770
Let's see what's the idea of this input.

8
00:00:35,030 --> 00:00:36,020
So here it is.

9
00:00:36,350 --> 00:00:38,270
Let's go to Visual Studio Code.

10
00:00:38,590 --> 00:00:41,830
Now, again, let's create a variable.

11
00:00:42,110 --> 00:00:43,940
I'm going to call it content.

12
00:00:45,940 --> 00:00:46,660
Input.

13
00:00:50,300 --> 00:00:55,110
So let's go back to our page, as you can see, I already have something written here.

14
00:00:55,490 --> 00:00:57,290
This is not the placeholder.

15
00:00:57,320 --> 00:00:59,450
This is actually the value.

16
00:00:59,450 --> 00:01:01,830
I can write it again just to make sure.

17
00:01:02,420 --> 00:01:03,590
So here's my name.

18
00:01:04,930 --> 00:01:06,250
So going back here.

19
00:01:07,440 --> 00:01:17,940
Let's use Jake Query to select this element, so let's use the idea and then let's use the viral method.

20
00:01:18,420 --> 00:01:25,920
And again, as you can see, there's a logic behind Jake where so pretty much everything we do is very

21
00:01:25,920 --> 00:01:26,660
similar.

22
00:01:26,670 --> 00:01:30,520
So we are not passing anything, any argument here.

23
00:01:30,780 --> 00:01:35,360
So what it's going to do is just getting the value for us.

24
00:01:36,270 --> 00:01:37,470
So let's do it.

25
00:01:37,510 --> 00:01:39,000
And so that log.

26
00:01:41,130 --> 00:01:44,820
And let's see what we have inside this variable.

27
00:01:51,120 --> 00:01:57,680
I'm also going to copy this so we can make some tests, so saving this, refreshing the page.

28
00:01:58,530 --> 00:01:59,970
Let's go to the console.

29
00:02:01,950 --> 00:02:07,010
So as you can see, we just got the value inside this field.

30
00:02:07,260 --> 00:02:08,820
So now let's change this.

31
00:02:09,030 --> 00:02:11,340
I'm just going to change this to John.

32
00:02:12,850 --> 00:02:21,100
Doe, for example, and now we have a different value in this field, so if we call this method again

33
00:02:21,280 --> 00:02:24,910
now, we were able to get its value.

34
00:02:26,230 --> 00:02:35,110
So now, following the same logic, if we pass an argument instead, so I'm just going to pass a name.

35
00:02:35,120 --> 00:02:38,080
So Peter Green, for example.

36
00:02:43,900 --> 00:02:50,020
Now, we just changed the value inside this field using Querrey.

37
00:02:51,550 --> 00:02:56,800
Now let's see some other field types, so let's start by deselect box.

38
00:02:57,010 --> 00:03:02,100
If we want to get the selected value, we can use the same method.

39
00:03:02,260 --> 00:03:04,690
So let's see the idea of this element.

40
00:03:04,900 --> 00:03:05,920
So here it is.

41
00:03:06,220 --> 00:03:07,600
It's called options.

42
00:03:09,710 --> 00:03:19,790
So I'm just going to select this element, and then if I call the Volle method, we can see that we

43
00:03:19,790 --> 00:03:21,780
were able to get the value.

44
00:03:22,220 --> 00:03:29,900
This is Hoppity one, because as you can see, one thing is the text inside this element.

45
00:03:29,910 --> 00:03:33,890
So the e-mail content in one thing is the value.

46
00:03:34,100 --> 00:03:42,030
So what we did now is just getting the value if we just want to get the text that it's selected.

47
00:03:42,050 --> 00:03:47,800
So in this case, Bech, let's remember that with JavaScript, it was a little complicated.

48
00:03:48,050 --> 00:03:54,130
We needed to get the index and then just select the option and get the inner HTML.

49
00:03:54,380 --> 00:04:02,750
But with Jake Wery, it's more simple because Jake warit is very good to select element since we can

50
00:04:02,750 --> 00:04:04,660
use VSS selectors.

51
00:04:05,120 --> 00:04:07,340
This is as easy as doing this.

52
00:04:07,820 --> 00:04:10,400
So let's just get the.

53
00:04:11,350 --> 00:04:13,720
Options element.

54
00:04:16,250 --> 00:04:25,700
And now inside it, if we add a space here, then we are selecting the children of this element, so

55
00:04:25,700 --> 00:04:31,370
the children of this element are the option element and then.

56
00:04:32,490 --> 00:04:33,990
We just want the one.

57
00:04:35,520 --> 00:04:38,250
That has the selected attribute.

58
00:04:39,500 --> 00:04:48,050
So if we do this and then just call the text method, as you can see, with just one line of code,

59
00:04:48,170 --> 00:04:51,050
we were able to get the selected text.

60
00:04:51,350 --> 00:04:53,560
So now let's select a different one.

61
00:04:53,570 --> 00:04:54,530
So, Mt..

62
00:04:56,370 --> 00:05:03,600
Let's run the same code again, and now we have the text of the selected option, so now let's try to

63
00:05:03,600 --> 00:05:04,440
do something.

64
00:05:04,440 --> 00:05:10,280
Every time we change this element, let's send this text to the console.

65
00:05:10,440 --> 00:05:12,870
So let's go to Visual Studio Code.

66
00:05:24,060 --> 00:05:26,520
So here we have that option at.

67
00:05:29,680 --> 00:05:30,370
Element.

68
00:05:31,060 --> 00:05:40,270
So we are going to track the change event, so in January, the name of the event is not on change,

69
00:05:40,270 --> 00:05:41,160
but change.

70
00:05:41,470 --> 00:05:42,490
So change.

71
00:05:44,290 --> 00:05:52,060
And again, this is a method so open and close parentheses to execute the method, semicolon to end

72
00:05:52,060 --> 00:05:55,450
the statement, and inside here we need a function.

73
00:05:56,500 --> 00:06:04,210
So function open and close parentheses, open and close, curly braces, and inside here, what we want

74
00:06:04,210 --> 00:06:05,530
to do is just.

75
00:06:06,380 --> 00:06:12,140
Getting the value every time it changes, so let's create a new variable called new.

76
00:06:13,180 --> 00:06:13,840
Value.

77
00:06:16,570 --> 00:06:18,610
And going back.

78
00:06:21,010 --> 00:06:24,640
To what we've just done, so let's get this selecter.

79
00:06:31,490 --> 00:06:32,130
Pretty good.

80
00:06:32,150 --> 00:06:38,160
And now let's just send it to the council just for testing purposes.

81
00:06:38,900 --> 00:06:41,540
Let's send this variable.

82
00:06:44,050 --> 00:06:51,220
And now refreshing the page every time we select a different option, so Mountain, as you can see,

83
00:06:51,220 --> 00:06:56,050
we are getting the text inside it and sending it to the council.

84
00:06:56,050 --> 00:06:56,860
So city.

85
00:06:58,430 --> 00:07:06,230
Beach, this is pretty cool, and we are using much less lines of code than if we were working with

86
00:07:06,230 --> 00:07:07,760
vanilla JavaScript.

87
00:07:08,000 --> 00:07:08,420
All right.

88
00:07:08,420 --> 00:07:12,730
So moving forward, let's see how we can work with radio buttons.

89
00:07:12,740 --> 00:07:15,180
So this is going to be similar.

90
00:07:15,230 --> 00:07:19,140
All we need to do is adjust the selector.

91
00:07:19,280 --> 00:07:22,940
So let's go to Visual Studio code again first.

92
00:07:23,240 --> 00:07:26,500
Let's see what they have in common.

93
00:07:26,660 --> 00:07:35,760
So we have a form and inside the form we have input few types with the name of gender.

94
00:07:35,810 --> 00:07:41,600
So this is what they all have in common and this is what we are going to use in our code.

95
00:07:43,530 --> 00:07:46,620
So let's go back to visuals to record.

96
00:07:48,480 --> 00:07:54,930
And now, instead of selecting the options, we are just going to select any input.

97
00:07:56,880 --> 00:07:59,430
That has the name of.

98
00:08:00,650 --> 00:08:01,310
Gender.

99
00:08:02,590 --> 00:08:12,280
So any time we detect a change on these elements, we are going to execute something, so just to see

100
00:08:12,280 --> 00:08:13,710
if this is working.

101
00:08:14,840 --> 00:08:20,970
Let's just do that log and let's just send something like changed.

102
00:08:21,320 --> 00:08:24,510
This is something I like to do to see if this is working.

103
00:08:25,280 --> 00:08:26,840
So let me save this.

104
00:08:27,880 --> 00:08:36,310
So, again, the selecter we used here is just pure success, if you're familiar with success, you

105
00:08:36,310 --> 00:08:41,500
know that you can select element by using attributes.

106
00:08:42,670 --> 00:08:52,420
Using the braces, so let's go back there, I'm going to save this and let's try to change first, let

107
00:08:52,420 --> 00:08:55,660
me go to the cons. I'm just going to change it now.

108
00:08:55,900 --> 00:09:00,340
So as you can see, it is detecting the change event.

109
00:09:00,580 --> 00:09:02,740
So change changed again.

110
00:09:03,220 --> 00:09:03,910
Pretty cool.

111
00:09:05,260 --> 00:09:07,870
Now we want to get the value.

112
00:09:10,860 --> 00:09:14,310
So inside here, let's use the same selector.

113
00:09:15,030 --> 00:09:24,120
So we want to get the input, but we just need the one that has the checked attribute so we can just

114
00:09:24,120 --> 00:09:25,110
do it like this.

115
00:09:26,710 --> 00:09:28,630
And then again, the.

116
00:09:29,820 --> 00:09:40,210
Volle method, so when we do this, let's go back there, refresh the page every time we change it.

117
00:09:40,800 --> 00:09:43,200
Now we're getting the value.

118
00:09:43,410 --> 00:09:46,200
So F Norn AM.

119
00:09:48,220 --> 00:09:56,550
So if we inspect these elements, we can see that these values are the ones inside the value attribute,

120
00:09:56,890 --> 00:10:00,620
but what if we just want the text?

121
00:10:01,330 --> 00:10:04,300
Well, let's see how it is in HTML.

122
00:10:05,410 --> 00:10:13,120
With radio buttons, it's a bit more complicated because as you can see, the text is not part of this

123
00:10:13,120 --> 00:10:13,710
element.

124
00:10:14,200 --> 00:10:17,510
So this is not inside an attribute.

125
00:10:17,560 --> 00:10:21,270
This is not the content of the element.

126
00:10:21,670 --> 00:10:26,270
Maybe it's a little bit better to see it in the HTML file.

127
00:10:26,590 --> 00:10:28,570
So let's just go to this file.

128
00:10:28,570 --> 00:10:30,430
So jury forms.

129
00:10:37,460 --> 00:10:44,420
So here we have the radio button, so as you can see, we have an input that starts here and ends here.

130
00:10:46,650 --> 00:10:53,820
And then we just have this tax here that is not part of the element, so how can we get it?

131
00:10:54,120 --> 00:10:59,450
Well, this is easy to do if we use a parent element.

132
00:10:59,670 --> 00:11:05,850
So in this case, I just wrapped every input field with a SPEN.

133
00:11:06,070 --> 00:11:15,300
So this way, instead of getting the voucher attribute, I'm just going to use a method called parent.

134
00:11:16,870 --> 00:11:26,320
So in January, this method is going to select the parent of this element, so in this case, the parent

135
00:11:26,740 --> 00:11:30,400
of this input viewed is this SPEN.

136
00:11:34,820 --> 00:11:39,620
All right, so what happens if we get the age TML?

137
00:11:40,780 --> 00:11:42,430
Of this spane.

138
00:11:44,250 --> 00:11:45,470
Let's try it out.

139
00:11:50,840 --> 00:11:59,900
So when I click a different one, as you can see, we are able to get all the HTML inside this span,

140
00:12:00,140 --> 00:12:01,900
but this is not what we want.

141
00:12:01,910 --> 00:12:03,300
We just want this value.

142
00:12:03,470 --> 00:12:04,640
How can we do this?

143
00:12:04,790 --> 00:12:13,420
Well, let's remember that we also have the text method that is just going to ignore any HTML text.

144
00:12:13,670 --> 00:12:19,680
So it is just going to ignore all this, which is exactly what we need.

145
00:12:20,390 --> 00:12:26,870
So instead of using the HTML method, we are going to use the text method.

146
00:12:28,650 --> 00:12:30,300
So when we do this.

147
00:12:32,570 --> 00:12:41,240
Now, when we change values, we can see that we were able to just get the text that is next to these

148
00:12:41,240 --> 00:12:45,720
input food, so male, female and not informed.

149
00:12:46,280 --> 00:12:50,920
So now let's break this video into two parts, because I don't want it to get too long.

150
00:12:51,350 --> 00:12:55,880
Now, I want to talk about checkboxes, which is going to be similar.

151
00:12:56,060 --> 00:13:03,230
But since we can choose multiple items at the same time, I think it's better to talk about it in a

152
00:13:03,230 --> 00:13:04,280
separate video.

153
00:13:04,820 --> 00:13:05,840
So I'll see you then.