0:00:00.552,0:00:05.452
A form is a way for a webpage[br]to send information to a server.

0:00:05.452,0:00:09.953
We don't let the webpages here[br]on Khan Academy interact with servers

0:00:09.953,0:00:11.442
for security reasons.

0:00:11.442,0:00:13.648
So we don't teach forms here.

0:00:13.648,0:00:16.997
But, now that you are learning JavaScript[br]to manipulate webpages,

0:00:16.997,0:00:20.550
I can show you how to use JavaScript[br]to process form elements

0:00:20.550,0:00:23.074
instead of having to[br]send them to a server.

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

0:00:28.096,0:00:30.045
and their language.

0:00:30.045,0:00:34.027
And I want the webpage to say hello[br]to the user in their language

0:00:34.027,0:00:36.666
once they click this button.

0:00:36.666,0:00:41.457
The first step is to store[br]the button element in a variable.

0:00:41.457,0:00:49.307
So we'll just say:[br]`document.getElementById("button")`.

0:00:49.307,0:00:53.192
The next step is to define[br]the event listener function.

0:00:53.192,0:00:57.885
`var onButtonClick = function() {`

0:00:57.885,0:01:03.770
and then inside of here, we'll just start[br]with having it append a message.

0:01:03.770,0:01:08.729
So,[br]`document.getElementById("message")`,

0:01:08.729,0:01:10.709
we have a nice little message `div`.

0:01:10.709,0:01:20.707
And we'll just: `textContent +=[br]"You clicked me! Thank you so much!"`

0:01:20.707,0:01:23.161
A very grateful div!

0:01:23.161,0:01:28.796
Finally, step three, we will[br]add the event listener to the button

0:01:28.796,0:01:31.711
so that it calls that function[br]when it's clicked.

0:01:31.711,0:01:36.491
so, `("click", onButtonClick)`.

0:01:36.491,0:01:42.959
Pause the talk-through now, and see for[br]yourself that it works like you expected.

0:01:42.959,0:01:47.971
Now, let's make it actually say something[br]based on what's in the form.

0:01:47.971,0:01:52.850
We need to figure out how to get whatever[br]the user typed in the name input field.

0:01:52.850,0:01:55.834
Let's make a variable for it.

0:01:55.834,0:02:04.770
So,[br]`var name = document.getElementById`,

0:02:04.770,0:02:07.337
since it had an ID,

0:02:07.337,0:02:11.322
so we've got that there.

0:02:11.322,0:02:17.115
Let's make a new string for the greeting,[br]and concatenate the name of it,

0:02:17.115,0:02:22.720
so `var greeting = "Heyaz"`,[br]that's my favorite greeting,

0:02:22.720,0:02:24.203
` + name`.

0:02:24.203,0:02:30.351
Okay, so we've got a string, plus[br]whatever's being stored in that variable.

0:02:30.351,0:02:38.772
And now, this here, this text content,[br]should actually be `greeting`.

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

0:02:41.688,0:02:44.899
we found the name input, [br]we made a greeting string,

0:02:44.899,0:02:47.732
and we appended it to the div.

0:02:47.732,0:02:53.032
Pause the talk-through,[br]and see if it worked.

0:02:53.032,0:02:55.632
Not quite, right?

0:02:55.632,0:03:01.877
Did you see "Heyaz [object Object]", or[br]"Heyaz object Element"?

0:03:01.877,0:03:04.761
Assuming that your name isn't Object--

0:03:04.761,0:03:08.073
and no offense if it is,[br]that's a great name--

0:03:08.073,0:03:10.508
that means that something's wrong.

0:03:10.508,0:03:13.704
We expected to see whatever you typed in.

0:03:13.704,0:03:16.482
But we saw "object" instead.

0:03:16.482,0:03:20.682
That means that the `name` variable[br]is pointing at an object,

0:03:20.682,0:03:23.581
not the string we expected it to point at.

0:03:23.581,0:03:26.647
Maybe you've already[br]figured out the problem.

0:03:26.647,0:03:31.885
We stored the whole element object[br]inside the `name` variable.

0:03:31.885,0:03:34.987
And the element object is a big object

0:03:34.987,0:03:37.095
with lots of information[br]about the element:

0:03:37.095,0:03:39.532
all of its attributes, all of its methods.

0:03:39.532,0:03:43.472
To find out what the user typed in,[br]we have to access a particular property

0:03:43.472,0:03:46.211
of the element: the value.

0:03:46.211,0:03:51.918
I'll just go ahead and type `.value`,[br]and that should fix it.

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

0:03:56.177,0:03:57.984
It worked, right?

0:03:57.984,0:04:01.913
Now that's a common mistake to make,[br]so look out for it.

0:04:01.913,0:04:05.007
I want to show you[br]one more common mistake.

0:04:05.007,0:04:13.960
I'll take this line here, and move it[br]outside of the function.

0:04:13.960,0:04:22.740
Now, pause the talk-through,[br]type in the input, and press the button.

0:04:22.740,0:04:25.997
If it broke the way it should,[br]then you should have seen

0:04:25.997,0:04:28.050
an empty string for your name.

0:04:28.050,0:04:29.693
Have you figured out why?

0:04:29.693,0:04:33.937
You have to think carefully about[br]when each line of code is executed.

0:04:33.937,0:04:37.098
In the current code,[br]the browser loads the page,

0:04:37.098,0:04:39.770
and executes the JavaScript line-by-line.

0:04:39.770,0:04:42.928
First, it stores[br]the button element in a variable.

0:04:42.928,0:04:46.817
Then, it stores the value of[br]the input element in the variable.

0:04:46.817,0:04:50.460
But it stores the value[br]at the time that the page loads--

0:04:50.460,0:04:52.465
which would be empty.

0:04:52.465,0:04:56.320
Then, it defines a function and[br]assigns the event listener.

0:04:56.320,0:05:00.421
When the listener is called,[br]the name is still the same string

0:05:00.421,0:05:02.877
as it was when the page loaded.

0:05:02.877,0:05:06.201
So the listener never finds out[br]the latest thing that the user typed.

0:05:06.201,0:05:08.529
That's why this line of code

0:05:08.529,0:05:13.190
has to be inside[br]this event listener function,

0:05:13.190,0:05:18.757
so that it finds out the value[br]at the time that the event happens.

0:05:18.757,0:05:21.938
Let's add some code to look at[br]the language value now,

0:05:21.938,0:05:24.414
to make sure you're really getting this.

0:05:24.414,0:05:29.599
Inside the listener, I'll store[br]the language in a `lang` variable.

0:05:31.769,0:05:34.546
Ugh, look at this indenting,[br]this is horrible.

0:05:34.546,0:05:36.891
Let's just line these things up.

0:05:36.891,0:05:38.842
Okay, so...

0:05:38.842,0:05:41.453
[typing]

0:05:46.773,0:05:51.234
And you'll notice that I am naming[br]my variables the same thing as my IDs,

0:05:51.234,0:05:55.291
but that's just what I'm doing,[br]you don't have to do that.

0:05:55.291,0:05:59.787
Now I want to output a different message[br]based on what language they picked.

0:05:59.787,0:06:03.627
Notice the value isn't[br]what's shown in the drop-down.

0:06:03.627,0:06:06.880
It's the value attribute in the HTML.

0:06:06.880,0:06:11.250
So `lang` should be either[br]"en", "es", or "plt".

0:06:11.250,0:06:17.212
So that means:[br]`if (lang === "es")`,

0:06:17.212,0:06:23.684
then the greeting should be "Hola,".

0:06:23.684,0:06:26.809
Let's go ahead and make this [br]`greeting` variable here.

0:06:26.809,0:06:35.105
So then `greeting` will be[br]"Hola, " plus the name.

0:06:35.105,0:06:41.218
And then if the lang equals "plt",[br]good old Pig Latin,

0:06:41.218,0:06:48.538
the greeting should be,[br]"Ello-hey, " plus the name.

0:06:48.538,0:06:53.167
and then we can just[br]use an `else` for our English.

0:06:53.167,0:06:55.366
I'll just move this in here.

0:06:55.366,0:06:56.799
All right.

0:06:56.799,0:07:00.374
Ooh, and if you want a[br]fun bonus challenge,

0:07:00.374,0:07:03.840
try making a Pig Latin[br]converter for names,

0:07:03.840,0:07:07.678
so that the entire greeting,[br]including their name gets translated.

0:07:07.678,0:07:10.009
That'd be pretty neat.

0:07:10.009,0:07:13.295
Now pause the talk-through,[br]enter your name,

0:07:13.295,0:07:19.098
pick a different language, and try it out.

0:07:19.098,0:07:20.239
Neat, huh?

0:07:20.239,0:07:24.691
Now, there's a lot of stuff you can do[br]with form inputs and a little JavaScript:

0:07:24.691,0:07:27.316
word games, number games,[br]story makers...

0:07:27.316,0:07:30.029
and if you do have a server[br]outside of Khan Academy,

0:07:30.029,0:07:33.447
you can use JavaScript to do[br]pre-processing on form input

0:07:33.447,0:07:35.361
before sending it to a server.

0:07:35.361,0:07:38.522
There are also a lot more events[br]you can listen to on forms,

0:07:38.522,0:07:40.701
like keypress and focus events.

0:07:40.701,0:07:44.152
Just remember to look at[br]the value of the inputs,

0:07:44.152,0:07:47.289
and to check that value at the right time.

0:07:47.289,0:07:50.031
You'll get to practice that[br]in the next challenge,

0:07:50.031,0:07:52.644
which is a personal favorite of mine.