Processing forms with events (Video Version)

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.