WEBVTT

00:00.940 --> 00:07.980
In this lesson that we're going to see how we can access the value that the user has entered in these

00:08.760 --> 00:10.190
input fields.

00:10.710 --> 00:17.580
So I want to start by saying that when you grab a value of an input field like this one it's fairly

00:17.580 --> 00:21.230
easy we just grab the value of that of that field and that's it.

00:21.270 --> 00:28.490
But when working with drop downs it's a little bit more complex because if we look at the DML you'll

00:28.500 --> 00:31.540
see that there is a select target.

00:31.710 --> 00:37.230
So we select say if we select by John by the ID called gender we were going to select these element

00:37.650 --> 00:43.140
but then the options are inside that element on each of the options has a value and we want to select

00:43.140 --> 00:48.390
the option that's selected that has the selected attribute.

00:48.390 --> 00:51.670
So let's begin by the input field.

00:51.800 --> 00:54.530
That's the simplest one.

00:55.110 --> 01:00.680
I want to grab that in here.

01:01.190 --> 01:02.880
I'll get the Harvey to use.

01:02.900 --> 01:10.560
And third I want to start by creating a variable just to store the element and then we do the usual

01:10.590 --> 01:19.510
document get element by a D and D A guy over here is well.

01:19.630 --> 01:20.010
Hobby

01:24.580 --> 01:29.440
now to grab the actual Havi value.

01:29.770 --> 01:33.430
That's that's just getting the field

01:36.970 --> 01:40.200
accessing the value property of that field.

01:40.240 --> 01:49.870
So let's check this in the console so that you can you can make sure that that didn't make any mistakes.

01:49.960 --> 01:53.660
So if I take one then we get one.

01:54.100 --> 02:00.450
So we are indeed getting it correctly and just going to get rid of this stuff.

02:02.080 --> 02:13.720
Now regarding the sex of the user that we want to search will follow a similar approach at the beginning.

02:14.170 --> 02:18.780
That's going to be documented get element by A.D.

02:18.970 --> 02:21.440
And then we saw that it was gender.

02:21.490 --> 02:30.790
Now which option is selected because it's what we get inside the gender feel we get a list of options

02:31.150 --> 02:33.310
we want to know the index of the one that's selected.

02:33.310 --> 02:38.950
So what I'm going to do now you could do all in one line but I'll do it step by step so that it's more

02:38.950 --> 02:47.900
clear so that does that say that this is the selected index and that's going to be gender gender field

02:50.610 --> 02:54.850
dot select index.

02:55.020 --> 02:57.110
That's actually the name of the property.

02:57.400 --> 03:05.520
And this could have been say s and that will give us to select the index which will go from zero to

03:05.820 --> 03:08.950
2 so 0 1 2.

03:09.170 --> 03:13.400
Let me show you how this works.

03:13.800 --> 03:21.490
So if I if I do it now zero then it's 1 and then it's 2 on.

03:22.110 --> 03:23.800
Now how can we apply that.

03:23.910 --> 03:29.770
We can actually get to select the gender like this.

03:29.850 --> 03:38.760
Options that gives us the list of options and then the index of this list is the one that selected.

03:39.150 --> 03:45.870
So by doing this we're selecting the option and we don't want that option because this is the third

03:45.870 --> 03:46.250
option.

03:46.260 --> 03:48.420
We just want the value of that option.

03:48.600 --> 03:49.740
So we do not value

03:53.860 --> 03:57.560
let's see this working

04:00.770 --> 04:06.250
so we get a or we get an or we get F..

04:06.590 --> 04:16.280
So grabbing the user input with javascript it's just a matter of Firstly selecting the the element if

04:16.280 --> 04:24.290
that element has a value property you can just do dot value and if that element is something more complex

04:24.290 --> 04:30.560
like a list of elements you need to grab the selected index and then you need to grab there get the

04:30.570 --> 04:34.940
least of these options and point out which one you want.

04:34.940 --> 04:41.430
And from that one once you select the option then you grab the value of that option.
