1
00:00:00,000 --> 00:00:03,420
There's going to be a time in your life when you

2
00:00:03,420 --> 00:00:07,140
have a form and it's supposed to do something,

3
00:00:07,140 --> 00:00:10,230
but you actually have a button.

4
00:00:10,230 --> 00:00:12,470
Type is equal to submit.

5
00:00:12,465 --> 00:00:15,825
Submit this form and you have this button.

6
00:00:15,825 --> 00:00:17,555
And when someone submits the form,

7
00:00:17,550 --> 00:00:19,530
you want to do something,

8
00:00:19,530 --> 00:00:21,000
maybe you want to disable the button.

9
00:00:21,000 --> 00:00:23,100
You can totally disable that button if you wanted to.

10
00:00:23,100 --> 00:00:25,800
So people can't click submit more than once.

11
00:00:25,800 --> 00:00:27,380
That's a very common thing.

12
00:00:27,375 --> 00:00:32,505
Or you can completely stop the form from submitting entirely.

13
00:00:32,504 --> 00:00:34,234
Lets do an input here,

14
00:00:34,230 --> 00:00:37,520
and let's do the value is equal to, That's I do a value.

15
00:00:37,520 --> 00:00:41,160
Let's do a placeholder, Your name.

16
00:00:41,680 --> 00:00:44,840
And when we view the form, this is all looks like.

17
00:00:44,840 --> 00:00:48,210
So it's going to ask for your name and then you submit this form.

18
00:00:48,400 --> 00:00:51,230
Now, for this example,

19
00:00:51,230 --> 00:00:52,910
we're going to need to actually give this a name.

20
00:00:52,910 --> 00:00:55,520
Name is equal to name and this is going to show up in your URL.

21
00:00:55,520 --> 00:00:59,520
So when I hit submit and we're going to see name is equal to,

22
00:00:59,920 --> 00:01:02,930
let's put my name as Bob.

23
00:01:02,930 --> 00:01:05,890
And it says index.html.

24
00:01:05,885 --> 00:01:08,965
Question mark, name is equal to Bob.

25
00:01:08,960 --> 00:01:10,180
It's whatever you put in there.

26
00:01:10,175 --> 00:01:15,745
It's going to be auto filled in the URL.

27
00:01:15,740 --> 00:01:18,700
And it says be auto filled in the URL.

28
00:01:18,695 --> 00:01:20,785
And so maybe we don't want that to happen.

29
00:01:20,780 --> 00:01:22,900
Maybe we want something else to happen.

30
00:01:22,895 --> 00:01:26,525
And what I'm gonna do is zoom back in here.

31
00:01:27,850 --> 00:01:32,380
So what we can do is we can select this form.

32
00:01:32,375 --> 00:01:35,275
And then we can say On Submit,

33
00:01:35,270 --> 00:01:36,970
and this is where it gets interesting.

34
00:01:36,965 --> 00:01:41,965
Function can take any event parameter and we've actually been ignoring this whole time,

35
00:01:41,960 --> 00:01:46,430
but every event listener has an event parameter.

36
00:01:46,430 --> 00:01:51,920
And we can say event dot prevent default.

37
00:01:51,920 --> 00:01:54,730
And what this is going to do is say, hey, yes,

38
00:01:54,725 --> 00:01:59,515
a browser knows that a form is supposed to submit anytime you click the submit button.

39
00:01:59,510 --> 00:02:02,920
But when this form is submitted,

40
00:02:02,915 --> 00:02:05,275
its going to execute this function first.

41
00:02:05,270 --> 00:02:07,070
And we're going to say Take that event,

42
00:02:07,070 --> 00:02:11,960
the submit event, and prevented from doing its default thing,

43
00:02:11,960 --> 00:02:14,570
prevented from being itself.

44
00:02:14,570 --> 00:02:20,940
And so now we can say console.log form was not submitted.

45
00:02:22,000 --> 00:02:29,470
And I'm going to clean up this URL because we know that whenever we submit this form,

46
00:02:29,465 --> 00:02:33,715
that it automatically add stuff to the URL and maybe we don't want that.

47
00:02:33,710 --> 00:02:37,510
So let's go ahead and type Kyle As the name.

48
00:02:37,505 --> 00:02:39,125
Submit this form.

49
00:02:39,125 --> 00:02:40,925
You notice how the URL didn't change.

50
00:02:40,925 --> 00:02:45,005
The page, didn't flicker that page and reload and it says the form was not submitted.

51
00:02:45,005 --> 00:02:48,085
Now, honestly, at this point in time,

52
00:02:48,080 --> 00:02:50,120
this is completely useless to you because why would you

53
00:02:50,120 --> 00:02:52,540
want to prevent a form from being submitted?

54
00:02:52,535 --> 00:02:55,795
Well, you wouldn't maybe you'd want to disable the button,

55
00:02:55,790 --> 00:02:57,050
which we'll talk about down the road.

56
00:02:57,050 --> 00:02:59,660
Maybe you'll want to add a different class to the button so it looks different.

57
00:02:59,660 --> 00:03:01,430
So it looks like the form is submitted?

58
00:03:01,430 --> 00:03:06,100
Possibly, yes. We'll talk about that down the road as well.

59
00:03:06,095 --> 00:03:10,585
But the most common use case is when you have a form and you want to prevent it.

60
00:03:10,580 --> 00:03:15,860
What you want to do is you want to grab that form and you want to serialize the data.

61
00:03:15,860 --> 00:03:19,280
And then maybe you want to do some sort of ajax request.

62
00:03:19,280 --> 00:03:24,920
So the form should not actually submit to index.html or wherever you tell it to point to.

63
00:03:24,920 --> 00:03:30,880
Javascript can overwrite that and tell it to make an Ajax request to some other place.

64
00:03:30,875 --> 00:03:33,985
Now we don't know about jQuery ajax yet,

65
00:03:33,980 --> 00:03:36,020
so we can't talk about that just yet.

66
00:03:36,020 --> 00:03:38,120
We're going to talk about that near the end of the course.

67
00:03:38,120 --> 00:03:43,240
But for now, just tuck this in your back pocket because you're going to need it.

68
00:03:43,235 --> 00:03:47,215
And you whenever you submit a form and you want to prevent some default action,

69
00:03:47,210 --> 00:03:50,630
you're going to need to then grab the values from

70
00:03:50,630 --> 00:03:54,910
the input or the text areas or the select fields.

71
00:03:54,905 --> 00:03:58,145
You're going to want to grab that information and do something with it.

72
00:03:58,145 --> 00:04:01,615
And that's what event dot prevent default does.

73
00:04:01,610 --> 00:04:04,640
Now while we're on the subject of event dot prevent default,

74
00:04:04,640 --> 00:04:08,900
what we can do is let's go ahead and select this button.

75
00:04:08,900 --> 00:04:11,510
We know that when, whenever we press this button,

76
00:04:11,510 --> 00:04:13,300
whenever we click submit this form button,

77
00:04:13,295 --> 00:04:14,665
that is going to submit that form.

78
00:04:14,660 --> 00:04:15,890
It worked for us before.

79
00:04:15,890 --> 00:04:19,240
Surely is going to work again once we disable this JavaScript here,

80
00:04:19,235 --> 00:04:21,455
we can do the same thing with Submit.

81
00:04:21,455 --> 00:04:23,285
So let's go ahead and select that button.

82
00:04:23,285 --> 00:04:25,505
Button. But taught.

83
00:04:25,505 --> 00:04:28,085
But on,

84
00:04:28,085 --> 00:04:30,595
when we click that button,

85
00:04:30,590 --> 00:04:33,310
we're going to register a function.

86
00:04:33,305 --> 00:04:36,905
And because every function secretly has an event parameter,

87
00:04:36,905 --> 00:04:41,405
we can do event dot prevent, default.

88
00:04:41,490 --> 00:04:44,320
And just as a heads up,

89
00:04:44,320 --> 00:04:48,910
you will often see event as e. So whenever you see function e,

90
00:04:48,910 --> 00:04:52,000
chances are in JavaScript we're talking about event.

91
00:04:52,000 --> 00:04:54,930
And we could console.log.

92
00:04:54,925 --> 00:04:59,065
Button is rendered useless.

93
00:04:59,550 --> 00:05:04,120
And let's refresh the page and submit this button and it

94
00:05:04,120 --> 00:05:07,690
just says button is rendered uses the form is not submitting. I can do this.

95
00:05:07,690 --> 00:05:10,150
And when I submit the form, if it actually submits,

96
00:05:10,150 --> 00:05:13,090
this should be refreshed or it should be wiped clean.

97
00:05:13,090 --> 00:05:17,170
There should be nothing in here. But it's preventing the form from submitting.

98
00:05:17,170 --> 00:05:18,690
And why is it doing that?

99
00:05:18,685 --> 00:05:20,995
And it's because we said,

100
00:05:20,995 --> 00:05:24,205
take that button, whenever you click it, take that event,

101
00:05:24,200 --> 00:05:27,380
that click event, and prevent it from doing its normal thing,

102
00:05:27,380 --> 00:05:31,780
prevented from being a normal function in button.

103
00:05:31,775 --> 00:05:37,825
So in this lesson, what I would like you to do is write an HTML form when you submit it,

104
00:05:37,820 --> 00:05:39,430
prevented from doing anything.

105
00:05:39,425 --> 00:05:41,305
And then comment that out like I did.

106
00:05:41,300 --> 00:05:46,720
And when you have a submit button and remember that type of button cannot be button.

107
00:05:46,715 --> 00:05:48,205
It can not be reset,

108
00:05:48,200 --> 00:05:50,530
it has to be Submit.

109
00:05:50,525 --> 00:05:54,335
So when you submit this form by clicking the button,

110
00:05:54,335 --> 00:05:56,875
prevented from doing its normal thing as well.

111
00:05:56,870 --> 00:05:59,540
There's two ways to prevent the form from being submitted.

112
00:05:59,540 --> 00:06:03,860
And also remember, when you submit your form here,

113
00:06:03,860 --> 00:06:06,260
when you prevent it from being submitted.

114
00:06:06,260 --> 00:06:08,870
Typically what we do is we grab this information from

115
00:06:08,870 --> 00:06:11,660
like an input text field anywhere else.

116
00:06:11,660 --> 00:06:14,090
And we work with that information first and then maybe

117
00:06:14,090 --> 00:06:17,240
we actually submit it using JavaScript or maybe we don't.

118
00:06:17,240 --> 00:06:23,190
Maybe we send that information off to and ajax or an API endpoint.

119
00:06:23,350 --> 00:06:28,220
Regardless. If this is good to know that this is good to tuck in your back pocket.

120
00:06:28,220 --> 00:06:31,760
And event dot prevent default is very, very popular.

121
00:06:31,760 --> 00:06:32,990
You're going to see this everywhere and this is

122
00:06:32,990 --> 00:06:34,850
actually honestly, this is just JavaScript.

123
00:06:34,850 --> 00:06:36,920
This isn't even jQuery.

124
00:06:36,920 --> 00:06:39,730
So go ahead and give that a shot when you are done,

125
00:06:39,725 --> 00:06:42,865
let's talk about hiding elements.