1
00:00:02,310 --> 00:00:03,430
So let me comment out

2
00:00:03,420 --> 00:00:07,620
these two event listeners here or these two examples

3
00:00:07,620 --> 00:00:10,370
and let's dive into another kind of event

4
00:00:10,380 --> 00:00:12,350
we can listen to. For this,

5
00:00:12,360 --> 00:00:18,450
I'll add a form element here below my div with the buttons and in there,

6
00:00:18,450 --> 00:00:28,230
I'll add a label for title which says title and an input, type text with ID title let's say, very simple

7
00:00:28,230 --> 00:00:29,190
form here.

8
00:00:29,190 --> 00:00:31,200
Action can be left empty

9
00:00:31,710 --> 00:00:37,590
and with that, all we need to add to finish this form is a button of type

10
00:00:37,650 --> 00:00:38,270
submit,

11
00:00:38,280 --> 00:00:44,990
that's now important, that you set this type where we for example say submit as a caption. If you now

12
00:00:45,010 --> 00:00:49,000
save this and you reload, you'll get this form.

13
00:00:49,080 --> 00:00:54,390
Well the button is pretty big because it gets the same styling as up there but for this example, it doesn't

14
00:00:54,390 --> 00:00:54,960
really matter.

15
00:00:54,960 --> 00:01:00,120
We have this form here, we can enter something here and I can press submit and now watch closely what

16
00:01:00,120 --> 00:01:02,490
happens if I do press submit here,

17
00:01:02,790 --> 00:01:10,260
you see the page reloaded which reset my zoom in this case. Now it reloaded because the default behavior

18
00:01:10,410 --> 00:01:18,300
for the form element in HTML combined with the submit button is to send this form data to your

19
00:01:18,360 --> 00:01:22,170
server, so to the server which serves this page.

20
00:01:22,170 --> 00:01:28,050
In this case we have no web server, we serve this through the file protocol but still it tries to send this

21
00:01:28,050 --> 00:01:35,790
to you could say to the source which served this HTML file and this can make sense depending on which

22
00:01:35,790 --> 00:01:41,460
kind of application you're building because eventually, you want to get that user input to that server

23
00:01:41,650 --> 00:01:45,000
so that there you can work with it, store it in a database,

24
00:01:45,120 --> 00:01:52,110
do anything like that. Often however when you use HTML, you also want to prevent this from happening,

25
00:01:52,120 --> 00:01:58,300
you don't want to send that data to the server always when this button is pressed,

26
00:01:58,300 --> 00:02:05,440
instead you want to step in with Javascript and maybe validate the user input before you then take it

27
00:02:05,470 --> 00:02:06,010
and send it

28
00:02:06,010 --> 00:02:10,450
with the help of Javascript, something we'll also dive in in a separate module,

29
00:02:10,450 --> 00:02:17,470
how to send HTTP requests from inside Javascript. So you might want to prevent the default behavior of

30
00:02:17,470 --> 00:02:22,630
the browser, which for a submit button in a form is to submit that form

31
00:02:22,690 --> 00:02:26,350
and here again Javascript and the browser got you covered.

32
00:02:26,350 --> 00:02:30,080
So let's say we want to listen to that form submission, for that in events.js

33
00:02:30,100 --> 00:02:32,970
we can select our form,

34
00:02:33,050 --> 00:02:38,320
maybe down there with document query selector form,

35
00:02:38,320 --> 00:02:42,740
I only got one form tag in there so this will select that first and only form.

36
00:02:42,940 --> 00:02:48,490
And then on that form, not on the button as you see but on the form, we can add an event listener and

37
00:02:48,490 --> 00:02:54,700
there's a special submit event which the browser exposes on form elements and that is one of the rare

38
00:02:54,700 --> 00:03:00,700
events which does not exist on all DOM nodes because only form elements can be submitted, only

39
00:03:00,700 --> 00:03:03,250
form elements have that submit event,

40
00:03:03,460 --> 00:03:05,780
again MDN also tells you that.

41
00:03:05,860 --> 00:03:12,400
So here we can listen to that submit event and then execute some function when it occurs, in this function

42
00:03:12,400 --> 00:03:19,690
of course again, we get an event object and we can console log that. Now as a default, you will see that

43
00:03:19,690 --> 00:03:24,330
if I try to execute this and I reload this page, if I click submit here,

44
00:03:24,400 --> 00:03:31,120
we briefly saw that being logged but since we send that to the server automatically and that server

45
00:03:31,240 --> 00:03:37,090
or the file protocol in this case therefore reloaded the page, we lost our output there because the

46
00:03:37,090 --> 00:03:43,360
page reloaded and now we can do something which we haven't done before. This event object does not just

47
00:03:43,360 --> 00:03:45,220
give us a couple of properties,

48
00:03:45,370 --> 00:03:52,240
it also gives us methods to control this event and there, we got a method which we can call right at

49
00:03:52,240 --> 00:03:55,440
the start for example which is prevent default.

50
00:03:55,450 --> 00:04:02,410
This exists on any event object in Javascript, not just for the submit event and it does what the name

51
00:04:02,410 --> 00:04:05,210
implies, it prevents the default behavior

52
00:04:05,230 --> 00:04:12,130
the browser would apply for this event otherwise. Now the default behavior of course depends on the kind

53
00:04:12,130 --> 00:04:14,760
of event. For the submit event on a form,

54
00:04:14,770 --> 00:04:20,830
the default behavior is to submit that form to a server. For a link for example, the default behavior

55
00:04:20,830 --> 00:04:26,470
would be to go to that link and you can always block the browser from doing that and from following

56
00:04:26,470 --> 00:04:31,140
its default behavior and then instead implement your own logic.

57
00:04:31,170 --> 00:04:37,560
So now with this added, you will see that if we now reload again and I click submit, now we don't lose this

58
00:04:37,560 --> 00:04:43,800
because now the page doesn't reload because now, this default of taking the form data and sending it

59
00:04:43,800 --> 00:04:48,720
to a server and hence reloading the page, that is now prevented.

60
00:04:48,720 --> 00:04:51,770
Of course this means now you will need to implement it on your own

61
00:04:51,840 --> 00:04:57,150
and as I mentioned, we'll have a whole module where I show you how to send HTTP requests on your own from

62
00:04:57,150 --> 00:05:03,690
Javascript but it's a powerful feature to be aware of because you'll often need it to build exactly

63
00:05:03,690 --> 00:05:10,590
the user experience you want, where you sometimes, especially when working with forms, want to avoid

64
00:05:10,830 --> 00:05:13,150
that default behavior and want to override it.