WEBVTT

00:04.990 --> 00:12.210
In this video we're going to write code for our formats mojo function which will fill the edits form

00:12.390 --> 00:15.360
using the return dates on data.

00:15.450 --> 00:22.010
So so far we managed to get the data from the PSAP file and parse it.

00:22.020 --> 00:24.400
So now we've got an array.

00:25.060 --> 00:29.880
OK that we can use to fill the form.

00:29.880 --> 00:33.810
So I'm just going to print

00:37.320 --> 00:44.430
League trip variable again in the console to make it easier for us to see what's inside.

01:00.980 --> 01:06.810
So just click on the eddies button inside any of these trips.

01:06.810 --> 01:11.750
And now we can see array of objects.

01:11.990 --> 01:16.420
All right so we're going to use this data to fill the form.

01:16.670 --> 01:27.670
So let's start with the departure so we can then select the inputs using its ID

01:30.440 --> 01:32.940
which is departure 2.

01:33.350 --> 01:43.120
They say if you remember these are the IDs we gave to the different fields departure to destination

01:43.120 --> 01:44.640
2 and so on.

01:45.220 --> 01:46.540
OK.

01:46.940 --> 01:49.330
We're going to test the value of these

01:52.180 --> 01:58.850
two the elements of key departure inside our trip bearable.

01:58.990 --> 02:03.670
So to get those We're going to go to the variable trip and then we're going to go to the elements of

02:03.700 --> 02:05.710
key departure.

02:05.710 --> 02:19.350
All right we get to the same thing with the designation.

02:19.740 --> 02:27.560
OK and then we're going to do the same thing for the price seats available

02:58.120 --> 02:59.320
Okay.

02:59.980 --> 03:10.840
Now we're going to move to the radio buttons and the other stuff like the weekdays and so on.

03:11.060 --> 03:17.570
Okay so when we are dealing with checkboxes or radio buttons to set the value it's going to be slightly

03:17.570 --> 03:18.300
different.

03:18.440 --> 03:19.130
Okay.

03:19.130 --> 03:23.580
So we're going to differentiate two cases where are we going to look at the case where the chip is regular

03:24.440 --> 03:26.930
and then we're going to look at the other case.

03:27.140 --> 03:30.620
So let's start with the regular case.

03:30.620 --> 03:43.860
So if the trip is irregular then we get a check or Antek some checkboxes and then we're going to show

03:44.280 --> 03:48.770
the right elements and hide the elements we want to hide.

03:49.200 --> 03:52.830
Okay so to check if the trip is regular We're going to go

03:59.040 --> 04:07.290
to the data inside our trip bearable and we're going to check the value of the elements of key regular.

04:07.290 --> 04:17.130
So if the element of key regular is equal to

04:22.310 --> 04:31.100
y That's means that the trip is irregular pay else the trip is in North Africa.

04:31.550 --> 04:32.130
Okay.

04:32.190 --> 04:40.270
So first of all if the trip is regular then we're going to check this radio button.

04:41.180 --> 04:45.260
So to do that we're going to select the elements using his ID

04:49.760 --> 04:53.270
so the idea of the elements is

04:58.300 --> 04:59.140
yes to

05:02.390 --> 05:07.200
and then we're going to use the property method OK.

05:07.290 --> 05:10.910
So this method will take a couple of promises.

05:12.920 --> 05:15.940
So the first one is going to be checked.

05:16.570 --> 05:17.330
OK.

05:17.510 --> 05:23.540
Because we want to decide whether this is going to be checked or not.

05:23.570 --> 05:27.120
The second promise is going to be true or false.

05:27.140 --> 05:32.300
So since we want to check this because our trip is regular We're going to say this to true.

05:32.360 --> 05:33.560
All right.

05:33.590 --> 05:33.840
OK.

05:33.860 --> 05:37.370
We're going to do the same thing with all the other boxes.

05:37.450 --> 05:37.840
OK.

05:37.860 --> 05:39.570
Check boxes.

05:39.740 --> 05:41.540
So you're going to use this property or method.

05:41.690 --> 05:46.040
And we're going to says the checks property to True or false.

05:46.070 --> 05:48.150
So it starts with money.

05:48.290 --> 05:56.030
So we will need to check the value of the elements of key Monday inside.

05:56.040 --> 05:56.420
Trip

06:01.200 --> 06:01.830
is

06:05.680 --> 06:07.130
one or not.

06:07.160 --> 06:07.750
OK.

06:08.100 --> 06:10.840
So if you look the only

06:14.150 --> 06:15.840
OK we've got money there.

06:16.080 --> 06:18.530
It's not so we don't have anything in sight.

06:18.690 --> 06:25.430
So to check that we're going to say if the elements of key

06:28.360 --> 06:31.920
one day is equal to

06:34.880 --> 06:35.330
1

06:38.500 --> 06:41.050
then we get to set the property

06:44.680 --> 06:47.650
of the checkbooks Monday too.

06:47.850 --> 06:48.940
That's the idea.

06:50.190 --> 06:59.630
The were going to say that too true else we're going to say that to

07:02.180 --> 07:04.600
false.

07:05.020 --> 07:06.100
All right.

07:06.200 --> 07:10.770
So there is no other easy way to do this.

07:10.910 --> 07:23.250
We can go straight away and select Monday like that's And then we will decide right here what they we

07:23.250 --> 07:23.970
going to use.

07:23.970 --> 07:26.040
True or false.

07:26.190 --> 07:29.670
So we're going to use this

07:36.840 --> 07:43.650
for an old boy hey question mark.

07:44.130 --> 07:51.980
The one.

07:52.170 --> 07:54.200
So basically what we are saying here.

07:54.330 --> 08:00.510
We're going to say is the elements of keep Monday equal to 1.

08:00.690 --> 08:04.630
If yes then we want to.

08:04.860 --> 08:06.660
Otherwise we won't.

08:06.660 --> 08:07.610
False.

08:08.270 --> 08:08.910
OK.

08:09.480 --> 08:15.560
So that's a simplified way or a or a quick way to say all of this in one line.

08:15.970 --> 08:17.200
So I'm going to leave that for now.

08:19.820 --> 08:20.360
OK.

08:20.670 --> 08:25.570
So we're going to do exactly the same thing with all the other days.

08:25.620 --> 08:26.230
OK.

08:27.180 --> 08:31.890
Tuesday Wednesday until Sunday so we're going to pause the video and do exactly the same thing here.

08:32.010 --> 08:32.970
OK.

08:33.780 --> 08:36.080
All right so you've got all the weekdays.

08:36.240 --> 08:39.420
Now we're going to move to the time.

08:39.840 --> 08:49.840
OK so let's select the time input again we can do that using the ID of the time inputs.

08:49.920 --> 08:58.170
Otherwise you can also use the inputs of name time when actually its name is tied to

09:03.070 --> 09:05.630
gave us an ID so you can use the idea as well if you like.

09:05.860 --> 09:10.180
So let's set the value of that to

09:13.380 --> 09:18.840
the end events of key time

09:25.210 --> 09:25.830
all right.

09:25.830 --> 09:35.360
And finally we will need to hide all the one off elements and show only the irregular elements so let's

09:35.360 --> 09:45.170
hide everything to sort all the one of elements they have a class one of two I'm going to select them

09:45.170 --> 09:54.540
using the class so going to hide them and we're going to show the elements of class

09:57.000 --> 09:57.960
regular to

10:01.680 --> 10:04.800
OK so now we're done with the regular case.

10:04.810 --> 10:08.480
Now let's move to the one off case

10:11.310 --> 10:19.860
let's say if it's a one off we going to start with the radio button and says the chick's property to

10:19.970 --> 10:24.480
True.

10:25.700 --> 10:39.400
So the idea of the radio button was no tube go and also we're going to set the dates.

10:39.530 --> 10:39.800
OK.

10:39.800 --> 10:49.120
Using the value of the elements of key dates so we can select these elements using his ID or just do

10:49.690 --> 10:56.150
the same thing we did with the time.

10:56.340 --> 11:05.090
It's got a name date too and the value is going to be corresponding to the elements of key dates and

11:05.220 --> 11:12.780
regarding the time we're going to do exactly the same thing we did in Iraq in a case.

11:13.350 --> 11:16.970
OK.

11:17.210 --> 11:21.850
So everything looks fine so I will save and try our code

11:25.510 --> 11:27.250
so it's clear all the areas.

11:27.780 --> 11:28.640
OK.

11:28.730 --> 11:30.640
Now we can see the details.

11:30.670 --> 11:41.310
The only thing that's missing here is that we don't see we haven't hidden the regular elements showing

11:41.380 --> 11:46.640
the elements at the end of the one off case.

11:46.660 --> 11:47.470
So let's do that.

11:47.470 --> 11:55.420
So we want to hide all the regular elements and show all the evidence.

11:55.450 --> 11:59.340
All right so well there is a minus sign right that

12:11.310 --> 12:18.920
OK so let's save and refresh the page you click on the button.

12:19.090 --> 12:25.310
So we can see that the form has been filled with the right information.

12:25.470 --> 12:26.780
So it is a one off trip.

12:26.790 --> 12:29.290
Let's pick a regular one.

12:30.120 --> 12:33.630
OK perfect so you can see the day's time.

12:33.640 --> 12:34.910
Let's try another one.

12:34.940 --> 12:37.470
One of OK.

12:37.590 --> 12:39.720
Perfect.

12:39.720 --> 12:47.070
All right so in the next video we're going to write code to edits the trip in the crypt table.

12:47.100 --> 12:48.400
Once we submit the form.