WEBVTT

0
00:00.520 --> 00:04.240
We are going to be talking about submitting forms in more detail now.

1
00:04.240 --> 00:10.960
And what I mean by this, is that I just want to discuss what happens after you submit a form.

2
00:10.960 --> 00:15.790
As you and I already know, there's the front end aspect of building the form, and then there's the

3
00:15.790 --> 00:17.260
client side validation.

4
00:17.260 --> 00:21.610
And once that process is complete and everything is valid, what happens next?

5
00:21.640 --> 00:26.790
Well, generally speaking, there are 2 ways to process forms.

6
00:26.800 --> 00:29.410
One, we can use the action attribute.

7
00:29.410 --> 00:33.040
And remember, we use this action attribute on the form element itself, right?

8
00:33.040 --> 00:39.820
Remember? And we can use that to send the form data to a back end URL. And that back end URL will

9
00:39.820 --> 00:44.080
then process the form, and redirect the user to a success or error page.

10
00:44.080 --> 00:48.790
And if we use this way, we don't need any JavaScript, right?

11
00:48.790 --> 00:53.290
It's as simple as using the form wrapper, and putting the action attribute on it.

12
00:53.290 --> 00:54.490
It really is that simple.

13
00:54.520 --> 01:00.580
But sometimes you want more control and using the action attribute is not the only way.

14
01:00.590 --> 01:09.980
We also have AJAX. And we can use AJAX queries to submit the form without even leaving the page aka with

15
01:09.980 --> 01:11.810
no page refresh.

16
01:11.810 --> 01:18.020
If you are a bit unsure what AJAX is or want a bit more information, please check out my CRP or AJAX course. 

17
01:18.020 --> 01:22.640
But I am going to stop this lecture shortly and I'll show you an example of AJAX.

18
01:22.640 --> 01:28.490
But anyway, the point I want to make is that when we use AJAX, we do have to also use JavaScript and

19
01:28.490 --> 01:35.300
therefore success or error messages are displayed on the same page by manipulating the HTML with JavaScript.

20
01:35.690 --> 01:41.690
Now I just want to say, depending on how your company or organization is structured, form processing

21
01:41.690 --> 01:45.140
may not be part of your job role as a front end web developer.

22
01:45.140 --> 01:49.940
And if that is the case, you'll just need to coordinate very closely with a back end developer to make

23
01:49.970 --> 01:53.390
sure that the form submits the correct name:value pairs.

24
01:53.420 --> 01:59.330
Otherwise it's going to be up to you to make sure the front end and the back end of your forms fit neatly

25
01:59.330 --> 01:59.990
together.

26
02:00.080 --> 02:01.520
Okay, so you got it, right?

27
02:01.550 --> 02:07.640
We submit the form, we can use either the action attribute on the form element itself or we can use AJAX

28
02:07.640 --> 02:08.420
queries.

29
02:08.690 --> 02:15.190
But regardless of which approach we use, the next step, or the process, remains the same.

30
02:15.200 --> 02:17.690
In other words, I want to talk a bit about now,

31
02:17.690 --> 02:22.190
when the user submits a form, where does that data go and how do we handle it?

32
02:22.190 --> 02:26.210
Well, this boils down to the client/server architecture.

33
02:26.210 --> 02:33.320
At its most basic, we have a browser which is known as a client. And we have a server, right?

34
02:33.320 --> 02:36.290
That's where all the files of any web page, sit.

35
02:36.290 --> 02:38.990
So we know that - we've got a browser and we've got a server.

36
02:39.080 --> 02:45.140
Well, the browser aka the client, whatever you want to call it, it will send a request to a server.

37
02:45.140 --> 02:46.580
What do I mean by a server?

38
02:46.610 --> 02:51.680
I mean a server like Apache or Tomcat or Node.js.

39
02:51.710 --> 02:52.160
etc

40
02:52.160 --> 02:52.780
etc.

41
02:52.790 --> 02:57.680
It's going to be sending it to a server, but it sends it how? It sends it using a protocol, a set of

42
02:57.680 --> 02:58.280
rules.

43
02:58.280 --> 03:02.830
And typically, when we're talking web, we're talking the HTTP protocol.

44
03:03.010 --> 03:03.910
Okay, have you got it?

45
03:03.910 --> 03:08.320
So the browser sends an HTTP request to a server.

46
03:08.350 --> 03:09.280
What does the server do?

47
03:09.280 --> 03:14.560
Well, the server has to listen for that HTTP request and when it receives that request, it has to

48
03:14.560 --> 03:21.040
process the data and then it issues a response using the same HTTP protocol.

49
03:21.040 --> 03:22.420
And that is the crux of it.

50
03:22.420 --> 03:23.680
It really is the crux of it.

51
03:23.680 --> 03:30.670
So don't get bogged down with all the detail. An HTML form on a web page is nothing more than a convenient,

52
03:30.670 --> 03:38.290
user friendly way to configure an HTTP request to send data to a server, and it allows the server to

53
03:38.290 --> 03:42.160
listen for that request and send a response back to the client.

54
03:42.160 --> 03:44.110
Very, very cool, very useful.

55
03:44.110 --> 03:50.410
But like I mentioned, I want to stop here before I even start talking more about servers, and I want

56
03:50.410 --> 03:55.450
to show you what AJAX is, because I don't want you to be wondering this whole time, "what is AJAX ❓".

57
03:55.480 --> 03:57.670
Let me just tackle the elephant in the room.

58
03:57.700 --> 03:59.080
See you in the next lecture.