WEBVTT 00:05.310 --> 00:10.890 In this video we're going to write javascript code to submit the form with the user inputs. 00:11.040 --> 00:16.550 So first of all we're going to access the form and then use the submit method. 00:16.800 --> 00:22.980 And then after that we go to prevent the default submission of the form and then we're going to get 00:23.040 --> 00:24.220 all the user inputs. 00:24.270 --> 00:32.100 Store them in a variable and then after those we get to use the Google Maps geocoder in order for us 00:32.100 --> 00:39.030 to guess the coordinates of the departure and destination we'll get those coordinates add them to the 00:39.060 --> 00:45.220 variable where we sort all the user inputs and then if everything is OK we're going to send an agent 00:45.230 --> 00:47.580 school with all that data. 00:47.670 --> 00:51.890 So the call is going to go to the troops. 00:51.960 --> 00:53.620 Those people. 00:53.740 --> 00:54.320 Right. 00:54.570 --> 00:56.160 So let's start 01:00.320 --> 01:10.240 so we're going to write code to be executed when we click on Create strip wasn't. 01:10.860 --> 01:13.040 OK so this selects the form using its ID 01:23.770 --> 01:26.230 and then use the same method. 01:27.190 --> 01:32.020 So this method is going to take as a barometer a function. 01:32.410 --> 01:32.890 So 01:35.860 --> 01:41.450 this function is going to have one promiser of event objects. 01:41.510 --> 01:41.960 All right. 01:42.030 --> 01:48.080 So going to need objects later on to prevent the default processing. 01:48.460 --> 01:48.760 OK. 01:48.760 --> 01:52.270 So first of all let's just say that. 01:52.360 --> 02:00.980 So we can prevent the default processing by using the event object then a method called prevents default. 02:01.000 --> 02:05.530 We've done this many times now so you must be familiar with this. 02:05.560 --> 02:06.100 OK. 02:06.190 --> 02:12.080 All right so now we are ready to retrieve the user inputs using the serialise array function. 02:12.100 --> 02:16.170 So we're going to select the form again. 02:16.210 --> 02:29.070 You can use the keyword this because we are already inside the form and use the serialize array function. 02:29.240 --> 02:35.790 Now you've got all the inputs OK all the values. 02:35.790 --> 02:37.910 Does the user inputs. 02:38.320 --> 02:41.240 So let's say all these inside a variable. 02:41.290 --> 02:43.160 I'm going to call data. 02:43.300 --> 02:51.420 I'm going to define this variable right before we're going to be using it later on for other forms. 02:54.410 --> 02:59.100 OK so let's just check this and make sure that everything works. 02:59.110 --> 03:00.860 We're going to bring this in the console. 03:01.210 --> 03:01.720 So 03:04.810 --> 03:25.790 if we try something. 03:25.920 --> 03:32.990 OK so let's not look at that for now that's related to Google Maps. 03:32.990 --> 03:33.610 OK. 03:33.740 --> 03:39.970 There's something in the link so here is the array that we printed. 03:40.070 --> 03:44.430 So you can see the user inputs. 03:44.620 --> 03:48.810 OK I can see that pairs of names and values. 03:49.180 --> 03:49.640 All right. 03:49.660 --> 03:51.190 So everything works so far. 03:51.370 --> 03:54.200 So what are we going to do now. 03:55.000 --> 03:58.120 We need to add to those inputs. 03:59.130 --> 04:04.250 Something else which is the coordinates of the departure and destination. 04:04.410 --> 04:05.100 OK. 04:05.100 --> 04:12.480 So if you remember we need those two fill these fields in the table. 04:12.670 --> 04:19.430 So to get those We're going to start with the departure coordinates. 04:19.600 --> 04:21.380 So it's make our code tidy. 04:21.400 --> 04:24.220 We're going to define a function which will take care of this. 04:24.250 --> 04:30.670 So we're going to call this function get departure coordinates. 04:34.500 --> 04:38.280 Later on we need to use another function with the eddies form. 04:38.280 --> 04:38.930 OK. 04:39.030 --> 04:41.590 It's going to be more or less similar to this one. 04:41.700 --> 04:48.930 So just to differentiate between the two functions I'm going to call this one odd trip gets odd trip 04:49.110 --> 04:53.520 departure coordinates and then when it comes to that the other one we're going to get every trip departure 04:53.640 --> 04:54.450 coordinates. 04:54.690 --> 05:13.860 OK so let's define this function straight after. 05:15.070 --> 05:18.320 So it's not going to make any promises. 05:18.520 --> 05:19.120 OK. 05:19.380 --> 05:26.670 So to get the coordinates of the departure we're going to need something called a geocoder. 05:27.240 --> 05:34.290 So the decoder is going to be an object that we're going to use or we're going to create using a Google 05:34.290 --> 05:37.160 Maps constructs called geocoder. 05:37.320 --> 05:40.870 So it wasn't going to do right at the top of the file 05:44.820 --> 05:48.800 going to create something called a G-code 05:54.160 --> 05:55.330 So it's an object. 05:55.500 --> 05:56.770 OK. 05:57.180 --> 06:06.100 And we get to use its while we're going to need it to use the G-code feature of Google Maps. 06:06.100 --> 06:10.690 This feature will allow us to get coordinates of a social location. 06:10.690 --> 06:13.510 So let's define these variables we're going to call it geocoder. 06:13.890 --> 06:15.690 OK. 06:15.710 --> 06:22.330 Are we going to use constructs if we're going to use the keyword new then the constructor is inside 06:22.330 --> 06:23.190 Google Maps. 06:25.820 --> 06:30.550 It's called de-code. 06:30.900 --> 06:35.070 OK so using those objects we can send requests. 06:35.080 --> 06:44.020 OK with a certain location or address and then we're going to get a result and then inside the results 06:44.050 --> 06:46.950 we can get the coordinates of that address. 06:46.960 --> 06:49.390 So let's go ahead and use this geocoder. 06:49.390 --> 06:52.520 So let's send the requests. 06:52.840 --> 07:00.500 So we're going to use the objects geocoder and then we're going to use a method called G-code. 07:01.480 --> 07:01.960 OK. 07:02.140 --> 07:06.750 So this method is going to take options. 07:06.760 --> 07:08.310 So we need only one option here. 07:11.020 --> 07:13.600 Which will place inside curly brackets. 07:13.600 --> 07:18.430 So this option is going to be the address. 07:19.360 --> 07:26.600 So in our case we want these elements here so we can just select these inputs and get the value of us 07:26.620 --> 07:27.240 inputs. 07:27.460 --> 07:28.500 All right. 07:28.990 --> 07:38.240 So you can use equerry for this or javascript's straight away using the Gets elements by ID function 07:39.640 --> 07:47.310 the ID of the field is departure then to get the value its value like this. 07:47.500 --> 07:51.090 OK if used Jake where you could just select the elements. 07:51.310 --> 07:55.210 OK using its ID and then use the Val method. 07:55.210 --> 07:56.780 All right so now 08:01.030 --> 08:02.360 weve got the options. 08:02.380 --> 08:06.880 So right after the options we need a function 08:13.250 --> 08:25.870 to make things Id. 08:26.070 --> 08:33.440 OK so the function is going to take a couple of hours just so we can have the results. 08:33.590 --> 08:34.120 OK. 08:34.310 --> 08:38.140 That's what we're going to get in return and the status of the requests. 08:38.150 --> 08:43.030 So the stage is going to tell us if the request is okay or not. 08:43.070 --> 08:43.800 All right. 08:44.270 --> 08:48.380 So first of all we're going to check if the status is OK. 08:48.670 --> 08:49.370 OK. 08:49.430 --> 08:59.900 If the status is fine then we're going to get the coordinates of our address otherwise 09:04.200 --> 09:05.700 we'll decide what to do. 09:06.060 --> 09:06.840 Okay. 09:06.840 --> 09:10.310 So to check if the request is fine. 09:10.320 --> 09:13.660 We're going to check the value of the sages. 09:14.040 --> 09:20.820 So we're going to check if the value of the stage is OK and the value OK here needs to be set using 09:21.420 --> 09:28.320 Google dot maps dot geocoder stages dot. 09:28.410 --> 09:30.070 OK. 09:30.510 --> 09:36.180 So this is what a an OK status is OK. 09:36.250 --> 09:40.230 So if that's the case we're going to get the coordinates on it. 09:40.260 --> 09:43.650 So for now we're just going to print the results 09:47.570 --> 09:52.380 array in the console just to see what it looks like. 09:56.240 --> 10:03.100 So let's save and refresh and try something. 10:17.200 --> 10:18.050 OK. 10:18.330 --> 10:22.680 So we've got an array inside the array. 10:22.950 --> 10:25.430 You've got an object right. 10:25.890 --> 10:33.560 So we can see at Evans inside. 10:33.660 --> 10:37.860 So if we look at the geometry 10:42.610 --> 10:53.760 OK then the location so inside the location you can see that we've got a method lassitude so you can 10:53.760 --> 10:55.500 see the value of the lawsuit here. 10:55.500 --> 11:01.650 But we're going to need to use the method latitude to get the velocity and the same thing applies for 11:01.650 --> 11:02.670 the longitude. 11:02.750 --> 11:03.240 OK. 11:03.360 --> 11:08.040 So basically to get the latitude and longitude we're going to go to our results array. 11:08.430 --> 11:11.060 Go to the first elements of the array which is an object. 11:11.230 --> 11:12.300 OK. 11:12.390 --> 11:14.010 All you want elements anyway. 11:14.290 --> 11:23.560 And then we're going to need to go to the location and then use these methods latitude and longitude. 11:23.750 --> 11:24.230 OK. 11:24.540 --> 11:24.840 So 11:29.530 --> 11:31.960 I'm going to use a variable for the longitude. 11:31.960 --> 11:35.050 I'm going to call it a departure longitude. 11:35.380 --> 11:36.910 So I'm going to define it right. 11:36.930 --> 11:37.650 I've said data 11:43.340 --> 11:51.610 and I'm going to say that to the longitude which is what's what is going to be returned by the method. 11:51.850 --> 11:58.570 So to use that method we're going to use the results array then we're going to go to the elements of 11:58.570 --> 11:59.710 index 0. 11:59.940 --> 12:01.590 You got only 1 elements anyway. 12:01.780 --> 12:04.810 And then you're going to go to geometry. 12:05.560 --> 12:07.540 Then we're going to go to location 12:10.660 --> 12:17.090 and then we're going to use the longitude method OK. 12:17.650 --> 12:24.480 The same thing applies for the losses is used only thing and it's going to change is that we're going 12:24.480 --> 12:27.400 to use the latitude method. 12:28.020 --> 12:28.530 Okay. 12:28.710 --> 12:37.320 And then once we do this we're going to add these two elements to the data variable where we store all 12:37.320 --> 12:38.470 the inputs of our use. 12:38.630 --> 12:45.590 But before we do that let's just alert these elements this 12:51.830 --> 12:53.160 make sure everything works 13:08.800 --> 13:13.510 well guys so we can see the departure longitude OK of benefits. 13:14.760 --> 13:18.180 The departure of Bedfords. 13:18.450 --> 13:18.910 OK. 13:19.000 --> 13:22.440 You can take those online to make sure that you can see everything fine. 13:26.500 --> 13:37.240 You can see of course the right stuff there 52 for the longitude and 52 for the latitude and minus zero 13:37.240 --> 13:41.330 point four for the longitude. 13:41.520 --> 13:42.160 OK. 13:44.700 --> 13:46.900 All right so let's delete this one now. 13:47.460 --> 13:51.400 So are these two the data variable. 13:51.770 --> 13:55.420 Well the data array we're going to use the push method. 13:56.220 --> 13:57.390 OK. 13:59.000 --> 14:03.820 So we're going to need to add a pair of a name and value for each of these. 14:04.160 --> 14:12.140 So we're going to use curly brackets and then we're going to have a name and hey. 14:12.920 --> 14:16.470 So the first one is going to have a name Dep. longitude. 14:16.490 --> 14:18.570 I'm going to call it. 14:18.650 --> 14:22.160 So this is the name that we're going to be using in the page file. 14:22.270 --> 14:27.320 So we're going to refer to this one as departure longitude. 14:27.320 --> 14:28.670 So the volume is going to be that's one 14:35.820 --> 14:42.560 regarding the other one is going to be departure and the value is departure. 14:45.130 --> 14:47.230 All right. 14:47.590 --> 15:16.710 All right now in misprints the data variable in the console C only gets. 15:16.820 --> 15:20.400 OK so if you look at the final elements inside our array. 15:20.410 --> 15:26.180 Got a couple of just objects there and we can see the departure at longitude and the departure line. 15:26.360 --> 15:32.410 OK so now we go into the slide here we're going to do. 15:32.660 --> 15:33.160 OK. 15:33.330 --> 15:38.990 So she says OK now we are ready departure lawyer suit let's get you to the data variable. 15:38.990 --> 15:41.810 So now what happens to the rest. 15:41.810 --> 15:46.640 So we're going to need to look now at the departure at the destination coordinates. 15:46.730 --> 15:50.140 OK so we can call another function here. 15:51.180 --> 15:51.640 OK. 15:51.670 --> 15:57.910 And we're going to call it gets our trip deeper destination coordinates. 15:59.410 --> 16:00.180 OK. 16:00.770 --> 16:10.460 If the status is not OK we will still call the same function because we still want to get all the inputs. 16:10.580 --> 16:11.140 OK. 16:11.390 --> 16:13.840 And then send everything to the HP file. 16:14.030 --> 16:17.770 And then once we get everything then we can show any areas to show. 16:17.990 --> 16:18.450 OK. 16:18.650 --> 16:23.790 So for example if the situation is not OK here that's me. 16:23.790 --> 16:30.380 That something is wrong with the departure but still will carry on and we'll move to the destination 16:30.570 --> 16:31.280 I guess. 16:31.490 --> 16:37.820 We get details or coordinates of our destination and then once everything is OK we will still submit 16:37.940 --> 16:43.470 all the bodies to the BHB file and then we're going to show all the errors are user. 16:43.700 --> 16:44.170 OK. 16:44.450 --> 16:49.940 If we stop right there and show an error message then we can still do. 16:49.970 --> 16:51.540 And just say to the user. 16:51.560 --> 16:53.620 Something is wrong with the departure. 16:53.670 --> 16:55.530 They will need to fix the departure only. 16:55.700 --> 16:56.180 OK. 16:56.180 --> 16:58.540 We're going to follow the other way here. 16:58.790 --> 16:59.030 OK. 16:59.030 --> 17:02.040 So now we need to define dysfunction. 17:02.360 --> 17:02.950 OK. 17:03.080 --> 17:06.700 This function is going to be very similar to this one. 17:06.750 --> 17:07.990 Somebody is going to copy the code. 17:08.010 --> 17:09.520 And then again it changes slightly 17:13.270 --> 17:19.080 you're going to call it get a good trip destination coordinates. 17:19.300 --> 17:19.940 OK. 17:20.590 --> 17:27.490 So the elements we're looking at here is the enemy ID destination. 17:28.380 --> 17:35.170 Still call the decoder to get the coordinates set up departure longitude. 17:35.170 --> 17:38.090 We're going to call destination lawsuit. 17:38.090 --> 17:42.290 So you're going to need to define those variables 17:45.890 --> 17:47.150 OK. 17:47.340 --> 17:48.790 I missed the other one here. 17:49.160 --> 17:52.580 So Misty departure last 17:55.460 --> 18:00.080 so we're going to need the destination longitude. 18:00.260 --> 18:00.890 Let's use 18:09.730 --> 18:15.370 Ok then we're going to change all the parties to personation 18:31.560 --> 18:34.010 OK. 18:34.190 --> 18:36.600 All right now let's just delete these two 18:40.760 --> 18:42.800 OK and save 18:45.810 --> 18:50.140 so let's just print the data 18:53.280 --> 18:53.660 variable 19:07.340 --> 19:14.080 OK so at the end of the array we can see the destination longitude and latitude. 19:14.270 --> 19:14.810 OK. 19:15.810 --> 19:20.860 So the value there is not right. 19:20.940 --> 19:25.240 That's supposed to be destination. 19:25.490 --> 19:28.060 OK so I save and refresh again 19:33.470 --> 19:41.570 OK so let's have a quick look at objects of the end so we can see the situation longitude and this initial 19:41.620 --> 19:42.670 latitude. 19:42.710 --> 19:43.970 All right. 19:44.610 --> 19:49.070 OK so in the next video we're going to submit the form using AJAX.