A form is a way for a webpage to send information to a server.
We don't let the webpages here on Khan Academy interact with servers
for security reasons.
So we don't teach forms here.
But, now that you are learning JavaScript to manipulate webpages,
I can show you how to use JavaScript to process form elements
instead of having to send them to a server.
I've set up a bunch of form elements on this page to find out the user's name,
and their language.
And I want the webpage to say hello to the user in their language
once they click this button.
The first step is to store the button element in a variable.
So we'll just say: `document.getElementById("button")`.
The next step is to define the event listener function.
`var onButtonClick = function() {`
and then inside of here, we'll just start with having it append a message.
So, `document.getElementById("message")`,
we have a nice little message `div`.
And we'll just: `textContent += "You clicked me! Thank you so much!"`
A very grateful div!
Finally, step three, we will add the event listener to the button
so that it calls that function when it's clicked.
so, `("click", onButtonClick)`.
Pause the talk-through now, and see for yourself that it works like you expected.
Now, let's make it actually say something based on what's in the form.
We need to figure out how to get whatever the user typed in the name input field.
Let's make a variable for it.
So, `var name = document.getElementById`,
since it had an ID,
so we've got that there.
Let's make a new string for the greeting, and concatenate the name of it,
so `var greeting = "Heyaz"`, that's my favorite greeting,
` + name`.
Okay, so we've got a string, plus whatever's being stored in that variable.
And now, this here, this text content, should actually be `greeting`.
Let's see, that looks right--
we found the name input, we made a greeting string,
and we appended it to the div.
Pause the talk-through, and see if it worked.
Not quite, right?
Did you see "Heyaz [object Object]", or "Heyaz object Element"?
Assuming that your name isn't Object--
and no offense if it is, that's a great name--
that means that something's wrong.
We expected to see whatever you typed in.
But we saw "object" instead.
That means that the `name` variable is pointing at an object,
not the string we expected it to point at.
Maybe you've already figured out the problem.
We stored the whole element object inside the `name` variable.
And the element object is a big object
with lots of information about the element:
all of its attributes, all of its methods.
To find out what the user typed in, we have to access a particular property
of the element: the value.
I'll just go ahead and type `.value`, and that should fix it.
Pause the talk-through, try again.
It worked, right?
Now that's a common mistake to make, so look out for it.
I want to show you one more common mistake.
I'll take this line here, and move it outside of the function.
Now, pause the talk-through, type in the input, and press the button.
If it broke the way it should, then you should have seen
an empty string for your name.
Have you figured out why?
You have to think carefully about when each line of code is executed.
In the current code, the browser loads the page,
and executes the JavaScript line-by-line.
First, it stores the button element in a variable.
Then, it stores the value of the input element in the variable.
But it stores the value at the time that the page loads--
which would be empty.
Then, it defines a function and assigns the event listener.
When the listener is called, the name is still the same string
as it was when the page loaded.
So the listener never finds out the latest thing that the user typed.
That's why this line of code
has to be inside this event listener function,
so that it finds out the value at the time that the event happens.
Let's add some code to look at the language value now,
to make sure you're really getting this.
Inside the listener, I'll store the language in a `lang` variable.
Ugh, look at this indenting, this is horrible.
Let's just line these things up.
Okay, so...
[typing]
And you'll notice that I am naming my variables the same thing as my IDs,
but that's just what I'm doing, you don't have to do that.
Now I want to output a different message based on what language they picked.
Notice the value isn't what's shown in the drop-down.
It's the value attribute in the HTML.
So `lang` should be either "en", "es", or "plt".
So that means: `if (lang === "es")`,
then the greeting should be "Hola,".
Let's go ahead and make this `greeting` variable here.
So then `greeting` will be "Hola, " plus the name.
And then if the lang equals "plt", good old Pig Latin,
the greeting should be, "Ello-hey, " plus the name.
and then we can just use an `else` for our English.
I'll just move this in here.
All right.
Ooh, and if you want a fun bonus challenge,
try making a Pig Latin converter for names,
so that the entire greeting, including their name gets translated.
That'd be pretty neat.
Now pause the talk-through, enter your name,
pick a different language, and try it out.
Neat, huh?
Now, there's a lot of stuff you can do with form inputs and a little JavaScript:
word games, number games, story makers...
and if you do have a server outside of Khan Academy,
you can use JavaScript to do pre-processing on form input
before sending it to a server.
There are also a lot more events you can listen to on forms,
like keypress and focus events.
Just remember to look at the value of the inputs,
and to check that value at the right time.
You'll get to practice that in the next challenge,
which is a personal favorite of mine.