WEBVTT

0
00:03.700 --> 00:06.050
Wow, I'm really enjoying this cup of coffee ☕.

1
00:06.070 --> 00:11.070
Anyway, we've been talking about the hidden input type and its usefulness.

2
00:11.080 --> 00:11.440
Right.

3
00:11.440 --> 00:13.030
And when you might want to use it.

4
00:13.030 --> 00:18.160
And I did mention that one of the reasons why you might want to use it is to send, for example, a

5
00:18.310 --> 00:20.170
timestamp to the server.

6
00:20.170 --> 00:22.890
And I don't know why you want a timestamp,

7
00:22.900 --> 00:29.440
okay, maybe you want a timestamp because the time a user signs up as a member is important.

8
00:29.470 --> 00:34.510
What about if you're giving a special to someone or to users who sign up before,

9
00:34.750 --> 00:35.260
I don't know,

10
00:35.260 --> 00:38.260
midnight on the 12th of April, for example.

11
00:38.300 --> 00:43.940
Or, what about if you only allow users to, you know, log in at a certain time?

12
00:43.980 --> 00:47.320
Well, in these circumstances, you might want to submit a timestamp.

13
00:47.320 --> 00:51.130
So, what we want to do is we want to use JavaScript, okay?

14
00:51.130 --> 00:53.890
We want to use JavaScript to prevent the form submission

15
00:53.890 --> 01:00.970
until we get the timestamp, we then want to put it into that hidden input field and only then do we

16
01:00.970 --> 01:03.310
want the data submitted to a server.

17
01:03.320 --> 01:04.610
So how do we do that?

18
01:04.610 --> 01:07.100
Well, this is just going to be a very, very quick example.

19
01:07.130 --> 01:11.180
Very rudimentary, but it should hit that nail in the coffin.

20
01:11.180 --> 01:12.560
Hit the nail in the coffin???

21
01:16.760 --> 01:20.540
I don't know if that's the right expression, but it's going to drive the point home.

22
01:20.540 --> 01:21.260
There we go.

23
01:21.260 --> 01:22.160
So let's get going.

24
01:22.160 --> 01:23.820
Let's code up this simple example.

25
01:23.840 --> 01:25.670
Of course we need an HTML document.

26
01:25.700 --> 01:27.110
We need a body. In the body,

27
01:27.110 --> 01:28.580
let's create a form.

28
01:29.450 --> 01:34.130
Action can just stay blank, the method let's just say is GET.

29
01:34.160 --> 01:40.550
I know this is the default, but I'm just being explicit. And let's give this form an ID of mainForm.

30
01:40.550 --> 01:46.040
The reason I'm giving it an ID here is because I'm going to be targeting the form with JavaScript and

31
01:46.040 --> 01:49.670
I don't want to worry about styling, so let's just ask for the user's name.

32
01:49.670 --> 01:57.230
Input type text, and the name attribute can be set to fname and we don't even need an ID in this example.

33
01:57.620 --> 01:57.920
Right?

34
01:57.920 --> 01:58.940
Let's save this.

35
01:58.940 --> 02:01.010
And that's what it looks like on the browser.

36
02:01.520 --> 02:05.980
Now I want to have our hidden input field, right?

37
02:05.980 --> 02:07.000
So let's do that.

38
02:07.330 --> 02:09.190
Inputs of type hidden.

39
02:09.460 --> 02:17.770
The name can be timeStamp, its ID can be "hidden" and the value isn't so important for us now,

40
02:17.770 --> 02:18.130
right?

41
02:18.130 --> 02:22.930
We could put a random text here, but it's not going to matter.

42
02:22.960 --> 02:23.920
Why is it not going to matter?

43
02:23.920 --> 02:30.400
Well, we're going to replace the value of that input of type hidden with a timestamp using JavaScript

44
02:30.550 --> 02:32.050
and you'll see that in a second.

45
02:32.050 --> 02:35.380
And finally, we need the ability for the user to submit the form.

46
02:35.380 --> 02:38.140
So let's just have a button of type submit.

47
02:39.130 --> 02:39.910
How's that?

48
02:39.940 --> 02:41.050
Nothing too difficult.

49
02:41.050 --> 02:43.000
Next step is I want to use JavaScript.

50
02:43.000 --> 02:47.200
If you've done my JavaScript course, you'll know that JavaScript has to be wrapped within the <script>

51
02:47.200 --> 02:48.340
tag. And don't stress.

52
02:48.340 --> 02:50.890
It just is a visual, not a visual,

53
02:50.890 --> 02:55.630
it's just a clue to the browser that within the <script> tags we are typing JavaScript.

54
02:55.660 --> 03:00.820
So now the browser knows, hey, this is JavaScript and the JavaScript interpreter will kick in.

55
03:00.820 --> 03:02.290
So here we go, the script tag.

56
03:02.390 --> 03:04.610
The first thing I want to do is I want to grab our form.

57
03:04.610 --> 03:08.900
So let's define a variable called mainForm.

58
03:09.140 --> 03:17.780
And here we can access the document, we can getElementById(), and we gave that form an ID of I think

59
03:17.780 --> 03:18.980
it was mainForm.

60
03:18.980 --> 03:19.700
There we go.

61
03:21.920 --> 03:22.250
You know what?

62
03:22.250 --> 03:23.810
Let me just expand this slightly,

63
03:24.500 --> 03:24.860
so we can see that

64
03:24.860 --> 03:27.740
better. Grab our main form. 

65
03:29.640 --> 03:38.940
Now, my dear students, every single time a submit button is clicked or pressed by a user, what happens

66
03:38.940 --> 03:39.690
on that form?

67
03:42.270 --> 03:42.960
That's right.

68
03:42.990 --> 03:50.550
A "submit" event gets fired every single time the user hits return on their keyboard, or clicks on a button

69
03:50.550 --> 03:51.600
with type submit,

70
03:52.020 --> 03:56.040
a "submit" event is fired on the form.

71
03:56.040 --> 03:59.640
So what I want to do is I want to add an event listener.

72
03:59.640 --> 04:01.890
I want to listen for that submit event.

73
04:01.890 --> 04:04.590
And then when it happens, I want to do something.

74
04:04.590 --> 04:09.470
And you and I know we want to grab the time and then put it into that hidden input field.

75
04:09.480 --> 04:10.500
So how do we do that?

76
04:10.500 --> 04:17.280
Well, let's add an event listener for the "submit" event.

77
04:17.460 --> 04:19.890
That's what we want to do, and it's very, very easy.

78
04:19.890 --> 04:24.570
All we have to do is access our mainForm variable. On this, 

79
04:24.600 --> 04:28.630
JavaScript gives us an addEventListener() method right out of the box.

80
04:28.630 --> 04:31.750
We don't have to type this. And we're listening for the submit event.

81
04:31.750 --> 04:39.340
And then I'm just going to use arrow syntax to write our function or our code or as developers say,

82
04:39.340 --> 04:41.740
business logic, it's all the same thing.

83
04:41.740 --> 04:42.670
What's the first step?

84
04:42.670 --> 04:46.990
Well, the first step is let's grab our input of type hidden, right?

85
04:46.990 --> 04:49.990
Because we're going to be putting the time stamp in there.

86
04:49.990 --> 04:51.520
So let's grab it first.

87
04:51.670 --> 04:59.140
So let's say or let's define a variable called hiddenInput just to be explicit,

88
04:59.140 --> 05:00.760
so you know what's going on. Here, 

89
05:00.760 --> 05:07.900
we can access our document object, and on there we can getElementById, getElementById().

90
05:07.930 --> 05:08.740
Did we give it an ID?

91
05:08.980 --> 05:10.150
Yes, we did,

92
05:10.180 --> 05:10.750
of "hidden". 

93
05:10.930 --> 05:11.920
So there we go.

94
05:11.920 --> 05:13.990
We've got our hidden input field.

95
05:14.380 --> 05:20.590
Now let's set up our time stamp,

96
05:24.040 --> 05:29.350
and I don't really want to get into detail on the Date object in JavaScript, you know, I had a whole

97
05:29.350 --> 05:35.890
section on that in my JavaScript course, but needless to say, to cut a long story short, dates in

98
05:35.890 --> 05:42.760
JavaScript start at a certain time and that time is 1st of January 1970.

99
05:42.790 --> 05:45.600
I know weird, but it is what it is.

100
05:45.610 --> 05:53.080
So when we get a time stamp and we use JavaScript's Date object, it gives us milliseconds since the

101
05:53.080 --> 05:55.540
epoch time - 1970, for example.

102
05:55.540 --> 06:00.370
So what I want to do, is I actually want the years, just to show you a fun example.

103
06:00.370 --> 06:06.790
So why don't we set it up so we can find out how many years since 1970 we're at.

104
06:06.790 --> 06:09.430
But you are not limited to using years.

105
06:09.430 --> 06:11.590
You can literally do it to the millisecond.

106
06:11.740 --> 06:13.060
So how do we do it?

107
06:13.390 --> 06:14.620
Very, very easy.

108
06:14.650 --> 06:21.040
Firstly, I want to set up minutes and everything's done in milliseconds, by the way.

109
06:21.040 --> 06:30.220
So let's just convert everything to a minute and then we've got hours, which is minutes times 60.

110
06:30.220 --> 06:31.030
Just check my logic.

111
06:31.030 --> 06:31.810
I think I'm right.

112
06:31.810 --> 06:41.890
Then we've got days, which is hours times 24, and then we've got years, which is days times 365.

113
06:41.890 --> 06:44.650
And now I want to access JavaScript's Date object.

114
06:44.650 --> 06:50.470
So let's just call our date object "d", and we're going to use the constructor function.

115
06:50.470 --> 06:53.140
In order to do that, we use the "new" keyword in JavaScript.

116
06:53.140 --> 06:58.900
It's a very specific word saying we are instantiating a new object - in this instance, a Date object.

117
06:58.900 --> 07:02.020
So now that "d" variable is an object, okay?

118
07:02.080 --> 07:03.700
Specifically it's a Date object.

119
07:03.700 --> 07:06.880
And on that Date object we have many properties and methods.

120
07:07.060 --> 07:10.570
One of them is getTime().

121
07:10.870 --> 07:13.870
And remember, let me just put a comment here,

122
07:15.170 --> 07:17.360
getTime() returns

123
07:18.380 --> 07:19.820
milliseconds,

124
07:20.460 --> 07:24.680
milliseconds since 1970.

125
07:25.290 --> 07:25.490
Okay.

126
07:25.490 --> 07:29.300
So it's just going to be one long, random number.

127
07:29.940 --> 07:32.390
Well, not random number, but milliseconds.

128
07:34.380 --> 07:37.890
So that's what we've got now. And we've put that into our time variable.

129
07:37.890 --> 07:47.190
So all I want to do is I want to create our time stamp in years, and that's going to be equal to ... I want

130
07:47.190 --> 07:50.100
to use JavaScript's Math object.

131
07:50.100 --> 07:51.600
Again, I know this is a bit confusing.

132
07:51.630 --> 07:53.610
Don't worry, this is not the purpose of the lecture.

133
07:53.610 --> 07:56.340
It's just to kind of show you how we can use that hidden input type.

134
07:56.340 --> 08:00.540
And on this Math object, I want to access a method called round.

135
08:00.540 --> 08:01.800
I just want to round it.

136
08:01.800 --> 08:07.010
And of course we're getting our milliseconds and we're dividing it by ...

137
08:07.040 --> 08:07.530
by what?

138
08:07.530 --> 08:10.140
By years. We could do by days, by hours, by minutes.

139
08:10.140 --> 08:10.800
It doesn't matter.

140
08:10.800 --> 08:14.010
But in our case, let's do it by years.

141
08:15.630 --> 08:17.010
Whew, I think that's it.

142
08:17.670 --> 08:28.470
Final step is to place this time stamp into the value attribute of our hidden input.

143
08:33.050 --> 08:34.430
Is this making sense?

144
08:34.460 --> 08:34.910
I hope so.

145
08:34.910 --> 08:37.310
I know I'm going fast. Again, 

146
08:37.340 --> 08:38.630
don't get lost in all the detail.

147
08:38.630 --> 08:41.240
All I'm trying to show you is how to use a hidden input field.

148
08:41.450 --> 08:46.280
All we have to do now is we need to grab our hidden input variable.

149
08:46.310 --> 08:52.100
Remember if I scroll up, we grabbed our hidden input element in HTML.

150
08:52.220 --> 09:00.050
We want to access its value attribute, and we want that value attribute to be the timestamp in years.

151
09:00.050 --> 09:01.430
And I think that's it my

152
09:01.430 --> 09:05.960
students. Let's go to our browser, let's refresh.

153
09:06.350 --> 09:10.310
Let's type Wally and let's hit submit.

154
09:12.120 --> 09:12.690
What?

155
09:12.720 --> 09:13.920
How cool is this?

156
09:14.700 --> 09:16.500
No ways

157
09:19.170 --> 09:21.450
This has blown my mind.

158
09:21.480 --> 09:22.450
How cool is that?

159
09:22.470 --> 09:24.570
You can see, because it's a GET request,

160
09:24.600 --> 09:27.210
all our data is appended to the URL.

161
09:27.360 --> 09:35.880
We've got a timestamp, and our timestamp says "51" because it's been 51 years since 1970.

162
09:36.840 --> 09:37.620
Wow.

163
09:37.650 --> 09:38.580
How cool is that?

164
09:38.610 --> 09:41.010
So just a quick example to show you how it works.

165
09:41.070 --> 09:43.200
Obviously, you can tweak it to your needs.

166
09:43.200 --> 09:44.820
Maybe you want the exact time.

167
09:44.820 --> 09:46.360
Maybe you want the exact day.

168
09:46.380 --> 09:47.640
It's all available to you.

169
09:47.640 --> 09:53.280
But that's just one example why we can use the hidden input field to submit extra data to a server,

170
09:53.310 --> 09:56.520
data that the user doesn't need to see.

171
09:56.570 --> 09:57.660
Hope it's making sense.

172
09:57.690 --> 09:58.860
See you in the next lecture.