WEBVTT

00:00:00.552 --> 00:00:05.452
A form is a way for a webpage
to send information to a server.

00:00:05.452 --> 00:00:09.953
We don't let the webpages here
on Khan Academy interact with servers

00:00:09.953 --> 00:00:11.442
for security reasons.

00:00:11.442 --> 00:00:13.648
So we don't teach forms here.

00:00:13.648 --> 00:00:16.997
But, now that you are learning JavaScript
to manipulate webpages,

00:00:16.997 --> 00:00:20.550
I can show you how to use JavaScript
to process form elements

00:00:20.550 --> 00:00:23.074
instead of having to
send them to a server.

00:00:23.074 --> 00:00:28.096
I've set up a bunch of form elements
on this page to find out the user's name,

00:00:28.096 --> 00:00:30.045
and their language.

00:00:30.045 --> 00:00:34.027
And I want the webpage to say hello
to the user in their language

00:00:34.027 --> 00:00:36.666
once they click this button.

00:00:36.666 --> 00:00:41.457
The first step is to store
the button element in a variable.

00:00:41.457 --> 00:00:49.307
So we'll just say:
`document.getElementById("button")`.

00:00:49.307 --> 00:00:53.192
The next step is to define
the event listener function.

00:00:53.192 --> 00:00:57.885
`var onButtonClick = function() {`

00:00:57.885 --> 00:01:03.770
and then inside of here, we'll just start
with having it append a message.

00:01:03.770 --> 00:01:08.729
So,
`document.getElementById("message")`,

00:01:08.729 --> 00:01:10.709
we have a nice little message `div`.

00:01:10.709 --> 00:01:20.707
And we'll just: `textContent +=
"You clicked me! Thank you so much!"`

00:01:20.707 --> 00:01:23.161
A very grateful div!

00:01:23.161 --> 00:01:28.796
Finally, step three, we will
add the event listener to the button

00:01:28.796 --> 00:01:31.711
so that it calls that function
when it's clicked.

00:01:31.711 --> 00:01:36.491
so, `("click", onButtonClick)`.

00:01:36.491 --> 00:01:42.959
Pause the talk-through now, and see for
yourself that it works like you expected.

00:01:42.959 --> 00:01:47.971
Now, let's make it actually say something
based on what's in the form.

00:01:47.971 --> 00:01:52.850
We need to figure out how to get whatever
the user typed in the name input field.

00:01:52.850 --> 00:01:55.834
Let's make a variable for it.

00:01:55.834 --> 00:02:04.770
So,
`var name = document.getElementById`,

00:02:04.770 --> 00:02:07.337
since it had an ID,

00:02:07.337 --> 00:02:11.322
so we've got that there.

00:02:11.322 --> 00:02:17.115
Let's make a new string for the greeting,
and concatenate the name of it,

00:02:17.115 --> 00:02:22.720
so `var greeting = "Heyaz"`,
that's my favorite greeting,

00:02:22.720 --> 00:02:24.203
` + name`.

00:02:24.203 --> 00:02:30.351
Okay, so we've got a string, plus
whatever's being stored in that variable.

00:02:30.351 --> 00:02:38.772
And now, this here, this text content,
should actually be `greeting`.

00:02:38.772 --> 00:02:41.688
Let's see, that looks right--

00:02:41.688 --> 00:02:44.899
we found the name input, 
we made a greeting string,

00:02:44.899 --> 00:02:47.732
and we appended it to the div.

00:02:47.732 --> 00:02:53.032
Pause the talk-through,
and see if it worked.

00:02:53.032 --> 00:02:55.632
Not quite, right?

00:02:55.632 --> 00:03:01.877
Did you see "Heyaz [object Object]", or
"Heyaz object Element"?

00:03:01.877 --> 00:03:04.761
Assuming that your name isn't Object--

00:03:04.761 --> 00:03:08.073
and no offense if it is,
that's a great name--

00:03:08.073 --> 00:03:10.508
that means that something's wrong.

00:03:10.508 --> 00:03:13.704
We expected to see whatever you typed in.

00:03:13.704 --> 00:03:16.482
But we saw "object" instead.

00:03:16.482 --> 00:03:20.682
That means that the `name` variable
is pointing at an object,

00:03:20.682 --> 00:03:23.581
not the string we expected it to point at.

00:03:23.581 --> 00:03:26.647
Maybe you've already
figured out the problem.

00:03:26.647 --> 00:03:31.885
We stored the whole element object
inside the `name` variable.

00:03:31.885 --> 00:03:34.987
And the element object is a big object

00:03:34.987 --> 00:03:37.095
with lots of information
about the element:

00:03:37.095 --> 00:03:39.532
all of its attributes, all of its methods.

00:03:39.532 --> 00:03:43.472
To find out what the user typed in,
we have to access a particular property

00:03:43.472 --> 00:03:46.211
of the element: the value.

00:03:46.211 --> 00:03:51.918
I'll just go ahead and type `.value`,
and that should fix it.

00:03:51.918 --> 00:03:56.177
Pause the talk-through, try again.

00:03:56.177 --> 00:03:57.984
It worked, right?

00:03:57.984 --> 00:04:01.913
Now that's a common mistake to make,
so look out for it.

00:04:01.913 --> 00:04:05.007
I want to show you
one more common mistake.

00:04:05.007 --> 00:04:13.960
I'll take this line here, and move it
outside of the function.

00:04:13.960 --> 00:04:22.740
Now, pause the talk-through,
type in the input, and press the button.

00:04:22.740 --> 00:04:25.997
If it broke the way it should,
then you should have seen

00:04:25.997 --> 00:04:28.050
an empty string for your name.

00:04:28.050 --> 00:04:29.693
Have you figured out why?

00:04:29.693 --> 00:04:33.937
You have to think carefully about
when each line of code is executed.

00:04:33.937 --> 00:04:37.098
In the current code,
the browser loads the page,

00:04:37.098 --> 00:04:39.770
and executes the JavaScript line-by-line.

00:04:39.770 --> 00:04:42.928
First, it stores
the button element in a variable.

00:04:42.928 --> 00:04:46.817
Then, it stores the value of
the input element in the variable.

00:04:46.817 --> 00:04:50.460
But it stores the value
at the time that the page loads--

00:04:50.460 --> 00:04:52.465
which would be empty.

00:04:52.465 --> 00:04:56.320
Then, it defines a function and
assigns the event listener.

00:04:56.320 --> 00:05:00.421
When the listener is called,
the name is still the same string

00:05:00.421 --> 00:05:02.877
as it was when the page loaded.

00:05:02.877 --> 00:05:06.201
So the listener never finds out
the latest thing that the user typed.

00:05:06.201 --> 00:05:08.529
That's why this line of code

00:05:08.529 --> 00:05:13.190
has to be inside
this event listener function,

00:05:13.190 --> 00:05:18.757
so that it finds out the value
at the time that the event happens.

00:05:18.757 --> 00:05:21.938
Let's add some code to look at
the language value now,

00:05:21.938 --> 00:05:24.414
to make sure you're really getting this.

00:05:24.414 --> 00:05:29.599
Inside the listener, I'll store
the language in a `lang` variable.

00:05:31.769 --> 00:05:34.546
Ugh, look at this indenting,
this is horrible.

00:05:34.546 --> 00:05:36.891
Let's just line these things up.

00:05:36.891 --> 00:05:38.842
Okay, so...

00:05:38.842 --> 00:05:41.453
[typing]

00:05:46.773 --> 00:05:51.234
And you'll notice that I am naming
my variables the same thing as my IDs,

00:05:51.234 --> 00:05:55.291
but that's just what I'm doing,
you don't have to do that.

00:05:55.291 --> 00:05:59.787
Now I want to output a different message
based on what language they picked.

00:05:59.787 --> 00:06:03.627
Notice the value isn't
what's shown in the drop-down.

00:06:03.627 --> 00:06:06.880
It's the value attribute in the HTML.

00:06:06.880 --> 00:06:11.250
So `lang` should be either
"en", "es", or "plt".

00:06:11.250 --> 00:06:17.212
So that means:
`if (lang === "es")`,

00:06:17.212 --> 00:06:23.684
then the greeting should be "Hola,".

00:06:23.684 --> 00:06:26.809
Let's go ahead and make this 
`greeting` variable here.

00:06:26.809 --> 00:06:35.105
So then `greeting` will be
"Hola, " plus the name.

00:06:35.105 --> 00:06:41.218
And then if the lang equals "plt",
good old Pig Latin,

00:06:41.218 --> 00:06:48.538
the greeting should be,
"Ello-hey, " plus the name.

00:06:48.538 --> 00:06:53.167
and then we can just
use an `else` for our English.

00:06:53.167 --> 00:06:55.366
I'll just move this in here.

00:06:55.366 --> 00:06:56.799
All right.

00:06:56.799 --> 00:07:00.374
Ooh, and if you want a
fun bonus challenge,

00:07:00.374 --> 00:07:03.840
try making a Pig Latin
converter for names,

00:07:03.840 --> 00:07:07.678
so that the entire greeting,
including their name gets translated.

00:07:07.678 --> 00:07:10.009
That'd be pretty neat.

00:07:10.009 --> 00:07:13.295
Now pause the talk-through,
enter your name,

00:07:13.295 --> 00:07:19.098
pick a different language, and try it out.

00:07:19.098 --> 00:07:20.239
Neat, huh?

00:07:20.239 --> 00:07:24.691
Now, there's a lot of stuff you can do
with form inputs and a little JavaScript:

00:07:24.691 --> 00:07:27.316
word games, number games,
story makers...

00:07:27.316 --> 00:07:30.029
and if you do have a server
outside of Khan Academy,

00:07:30.029 --> 00:07:33.447
you can use JavaScript to do
pre-processing on form input

00:07:33.447 --> 00:07:35.361
before sending it to a server.

00:07:35.361 --> 00:07:38.522
There are also a lot more events
you can listen to on forms,

00:07:38.522 --> 00:07:40.701
like keypress and focus events.

00:07:40.701 --> 00:07:44.152
Just remember to look at
the value of the inputs,

00:07:44.152 --> 00:07:47.289
and to check that value at the right time.

00:07:47.289 --> 00:07:50.031
You'll get to practice that
in the next challenge,

00:07:50.031 --> 00:07:52.644
which is a personal favorite of mine.