Wow, I'm really enjoying this cup of coffee â˜•.
Anyway, we've been talking about the hidden input type and its usefulness.
Right.
And when you might want to use it.
And I did mention that one of the reasons why you might want to use it is to send, for example, a
timestamp to the server.
And I don't know why you want a timestamp,
okay, maybe you want a timestamp because the time a user signs up as a member is important.
What about if you're giving a special to someone or to users who sign up before,
I don't know,
midnight on the 12th of April, for example.
Or, what about if you only allow users to, you know, log in at a certain time?
Well, in these circumstances, you might want to submit a timestamp.
So, what we want to do is we want to use JavaScript, okay?
We want to use JavaScript to prevent the form submission
until we get the timestamp, we then want to put it into that hidden input field and only then do we
want the data submitted to a server.
So how do we do that?
Well, this is just going to be a very, very quick example.
Very rudimentary, but it should hit that nail in the coffin.
Hit the nail in the coffin???
I don't know if that's the right expression, but it's going to drive the point home.
There we go.
So let's get going.
Let's code up this simple example.
Of course we need an HTML document.
We need a body. In the body,
let's create a form.
Action can just stay blank, the method let's just say is GET.
I know this is the default, but I'm just being explicit. And let's give this form an ID of mainForm.
The reason I'm giving it an ID here is because I'm going to be targeting the form with JavaScript and
I don't want to worry about styling, so let's just ask for the user's name.
Input type text, and the name attribute can be set to fname and we don't even need an ID in this example.
Right?
Let's save this.
And that's what it looks like on the browser.
Now I want to have our hidden input field, right?
So let's do that.
Inputs of type hidden.
The name can be timeStamp, its ID can be "hidden" and the value isn't so important for us now,
right?
We could put a random text here, but it's not going to matter.
Why is it not going to matter?
Well, we're going to replace the value of that input of type hidden with a timestamp using JavaScript
and you'll see that in a second.
And finally, we need the ability for the user to submit the form.
So let's just have a button of type submit.
How's that?
Nothing too difficult.
Next step is I want to use JavaScript.
If you've done my JavaScript course, you'll know that JavaScript has to be wrapped within the <script>
tag. And don't stress.
It just is a visual, not a visual,
it's just a clue to the browser that within the <script> tags we are typing JavaScript.
So now the browser knows, hey, this is JavaScript and the JavaScript interpreter will kick in.
So here we go, the script tag.
The first thing I want to do is I want to grab our form.
So let's define a variable called mainForm.
And here we can access the document, we can getElementById(), and we gave that form an ID of I think
it was mainForm.
There we go.
You know what?
Let me just expand this slightly,
so we can see that
better. Grab our main form.
Now, my dear students, every single time a submit button is clicked or pressed by a user, what happens
on that form?
That's right.
A "submit" event gets fired every single time the user hits return on their keyboard, or clicks on a button
with type submit,
a "submit" event is fired on the form.
So what I want to do is I want to add an event listener.
I want to listen for that submit event.
And then when it happens, I want to do something.
And you and I know we want to grab the time and then put it into that hidden input field.
So how do we do that?
Well, let's add an event listener for the "submit" event.
That's what we want to do, and it's very, very easy.
All we have to do is access our mainForm variable. On this,
JavaScript gives us an addEventListener() method right out of the box.
We don't have to type this. And we're listening for the submit event.
And then I'm just going to use arrow syntax to write our function or our code or as developers say,
business logic, it's all the same thing.
What's the first step?
Well, the first step is let's grab our input of type hidden, right?
Because we're going to be putting the time stamp in there.
So let's grab it first.
So let's say or let's define a variable called hiddenInput just to be explicit,
so you know what's going on. Here,
we can access our document object, and on there we can getElementById, getElementById().
Did we give it an ID?
Yes, we did,
of "hidden".
So there we go.
We've got our hidden input field.
Now let's set up our time stamp,
and I don't really want to get into detail on the Date object in JavaScript, you know, I had a whole
section on that in my JavaScript course, but needless to say, to cut a long story short, dates in
JavaScript start at a certain time and that time is 1st of January 1970.
I know weird, but it is what it is.
So when we get a time stamp and we use JavaScript's Date object, it gives us milliseconds since the
epoch time - 1970, for example.
So what I want to do, is I actually want the years, just to show you a fun example.
So why don't we set it up so we can find out how many years since 1970 we're at.
But you are not limited to using years.
You can literally do it to the millisecond.
So how do we do it?
Very, very easy.
Firstly, I want to set up minutes and everything's done in milliseconds, by the way.
So let's just convert everything to a minute and then we've got hours, which is minutes times 60.
Just check my logic.
I think I'm right.
Then we've got days, which is hours times 24, and then we've got years, which is days times 365.
And now I want to access JavaScript's Date object.
So let's just call our date object "d", and we're going to use the constructor function.
In order to do that, we use the "new" keyword in JavaScript.
It's a very specific word saying we are instantiating a new object - in this instance, a Date object.
So now that "d" variable is an object, okay?
Specifically it's a Date object.
And on that Date object we have many properties and methods.
One of them is getTime().
And remember, let me just put a comment here,
getTime() returns
milliseconds,
milliseconds since 1970.
Okay.
So it's just going to be one long, random number.
Well, not random number, but milliseconds.
So that's what we've got now. And we've put that into our time variable.
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
to use JavaScript's Math object.
Again, I know this is a bit confusing.
Don't worry, this is not the purpose of the lecture.
It's just to kind of show you how we can use that hidden input type.
And on this Math object, I want to access a method called round.
I just want to round it.
And of course we're getting our milliseconds and we're dividing it by ...
by what?
By years. We could do by days, by hours, by minutes.
It doesn't matter.
But in our case, let's do it by years.
Whew, I think that's it.
Final step is to place this time stamp into the value attribute of our hidden input.
Is this making sense?
I hope so.
I know I'm going fast. Again,
don't get lost in all the detail.
All I'm trying to show you is how to use a hidden input field.
All we have to do now is we need to grab our hidden input variable.
Remember if I scroll up, we grabbed our hidden input element in HTML.
We want to access its value attribute, and we want that value attribute to be the timestamp in years.
And I think that's it my
students. Let's go to our browser, let's refresh.
Let's type Wally and let's hit submit.
What?
How cool is this?
No ways
This has blown my mind.
How cool is that?
You can see, because it's a GET request,
all our data is appended to the URL.
We've got a timestamp, and our timestamp says "51" because it's been 51 years since 1970.
Wow.
How cool is that?
So just a quick example to show you how it works.
Obviously, you can tweak it to your needs.
Maybe you want the exact time.
Maybe you want the exact day.
It's all available to you.
But that's just one example why we can use the hidden input field to submit extra data to a server,
data that the user doesn't need to see.
Hope it's making sense.
See you in the next lecture.