1
00:00:00,552 --> 00:00:05,452
A form is a way for a webpage
to send information to a server.

2
00:00:05,452 --> 00:00:09,953
We don't let the webpages here
on Khan Academy interact with servers

3
00:00:09,953 --> 00:00:11,442
for security reasons.

4
00:00:11,442 --> 00:00:13,648
So we don't teach forms here.

5
00:00:13,648 --> 00:00:16,997
But, now that you are learning JavaScript
to manipulate webpages,

6
00:00:16,997 --> 00:00:20,550
I can show you how to use JavaScript
to process form elements

7
00:00:20,550 --> 00:00:23,074
instead of having to
send them to a server.

8
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,

9
00:00:28,096 --> 00:00:30,045
and their language.

10
00:00:30,045 --> 00:00:34,027
And I want the webpage to say hello
to the user in their language

11
00:00:34,027 --> 00:00:36,666
once they click this button.

12
00:00:36,666 --> 00:00:41,457
The first step is to store
the button element in a variable.

13
00:00:41,457 --> 00:00:49,307
So we'll just say:
`document.getElementById("button")`.

14
00:00:49,307 --> 00:00:53,192
The next step is to define
the event listener function.

15
00:00:53,192 --> 00:00:57,885
`var onButtonClick = function() {`

16
00:00:57,885 --> 00:01:03,770
and then inside of here, we'll just start
with having it append a message.

17
00:01:03,770 --> 00:01:08,729
So,
`document.getElementById("message")`,

18
00:01:08,729 --> 00:01:10,709
we have a nice little message `div`.

19
00:01:10,709 --> 00:01:20,707
And we'll just: `textContent +=
"You clicked me! Thank you so much!"`

20
00:01:20,707 --> 00:01:23,161
A very grateful div!

21
00:01:23,161 --> 00:01:28,796
Finally, step three, we will
add the event listener to the button

22
00:01:28,796 --> 00:01:31,711
so that it calls that function
when it's clicked.

23
00:01:31,711 --> 00:01:36,491
so, `("click", onButtonClick)`.

24
00:01:36,491 --> 00:01:42,959
Pause the talk-through now, and see for
yourself that it works like you expected.

25
00:01:42,959 --> 00:01:47,971
Now, let's make it actually say something
based on what's in the form.

26
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.

27
00:01:52,850 --> 00:01:55,834
Let's make a variable for it.

28
00:01:55,834 --> 00:02:04,770
So,
`var name = document.getElementById`,

29
00:02:04,770 --> 00:02:07,337
since it had an ID,

30
00:02:07,337 --> 00:02:11,322
so we've got that there.

31
00:02:11,322 --> 00:02:17,115
Let's make a new string for the greeting,
and concatenate the name of it,

32
00:02:17,115 --> 00:02:22,720
so `var greeting = "Heyaz"`,
that's my favorite greeting,

33
00:02:22,720 --> 00:02:24,203
` + name`.

34
00:02:24,203 --> 00:02:30,351
Okay, so we've got a string, plus
whatever's being stored in that variable.

35
00:02:30,351 --> 00:02:38,772
And now, this here, this text content,
should actually be `greeting`.

36
00:02:38,772 --> 00:02:41,688
Let's see, that looks right--

37
00:02:41,688 --> 00:02:44,899
we found the name input, 
we made a greeting string,

38
00:02:44,899 --> 00:02:47,732
and we appended it to the div.

39
00:02:47,732 --> 00:02:53,032
Pause the talk-through,
and see if it worked.

40
00:02:53,032 --> 00:02:55,632
Not quite, right?

41
00:02:55,632 --> 00:03:01,877
Did you see "Heyaz [object Object]", or
"Heyaz object Element"?

42
00:03:01,877 --> 00:03:04,761
Assuming that your name isn't Object--

43
00:03:04,761 --> 00:03:08,073
and no offense if it is,
that's a great name--

44
00:03:08,073 --> 00:03:10,508
that means that something's wrong.

45
00:03:10,508 --> 00:03:13,704
We expected to see whatever you typed in.

46
00:03:13,704 --> 00:03:16,482
But we saw "object" instead.

47
00:03:16,482 --> 00:03:20,682
That means that the `name` variable
is pointing at an object,

48
00:03:20,682 --> 00:03:23,581
not the string we expected it to point at.

49
00:03:23,581 --> 00:03:26,647
Maybe you've already
figured out the problem.

50
00:03:26,647 --> 00:03:31,885
We stored the whole element object
inside the `name` variable.

51
00:03:31,885 --> 00:03:34,987
And the element object is a big object

52
00:03:34,987 --> 00:03:37,095
with lots of information
about the element:

53
00:03:37,095 --> 00:03:39,532
all of its attributes, all of its methods.

54
00:03:39,532 --> 00:03:43,472
To find out what the user typed in,
we have to access a particular property

55
00:03:43,472 --> 00:03:46,211
of the element: the value.

56
00:03:46,211 --> 00:03:51,918
I'll just go ahead and type `.value`,
and that should fix it.

57
00:03:51,918 --> 00:03:56,177
Pause the talk-through, try again.

58
00:03:56,177 --> 00:03:57,984
It worked, right?

59
00:03:57,984 --> 00:04:01,913
Now that's a common mistake to make,
so look out for it.

60
00:04:01,913 --> 00:04:05,007
I want to show you
one more common mistake.

61
00:04:05,007 --> 00:04:13,960
I'll take this line here, and move it
outside of the function.

62
00:04:13,960 --> 00:04:22,740
Now, pause the talk-through,
type in the input, and press the button.

63
00:04:22,740 --> 00:04:25,997
If it broke the way it should,
then you should have seen

64
00:04:25,997 --> 00:04:28,050
an empty string for your name.

65
00:04:28,050 --> 00:04:29,693
Have you figured out why?

66
00:04:29,693 --> 00:04:33,937
You have to think carefully about
when each line of code is executed.

67
00:04:33,937 --> 00:04:37,098
In the current code,
the browser loads the page,

68
00:04:37,098 --> 00:04:39,770
and executes the JavaScript line-by-line.

69
00:04:39,770 --> 00:04:42,928
First, it stores
the button element in a variable.

70
00:04:42,928 --> 00:04:46,817
Then, it stores the value of
the input element in the variable.

71
00:04:46,817 --> 00:04:50,460
But it stores the value
at the time that the page loads--

72
00:04:50,460 --> 00:04:52,465
which would be empty.

73
00:04:52,465 --> 00:04:56,320
Then, it defines a function and
assigns the event listener.

74
00:04:56,320 --> 00:05:00,421
When the listener is called,
the name is still the same string

75
00:05:00,421 --> 00:05:02,877
as it was when the page loaded.

76
00:05:02,877 --> 00:05:06,201
So the listener never finds out
the latest thing that the user typed.

77
00:05:06,201 --> 00:05:08,529
That's why this line of code

78
00:05:08,529 --> 00:05:13,190
has to be inside
this event listener function,

79
00:05:13,190 --> 00:05:18,757
so that it finds out the value
at the time that the event happens.

80
00:05:18,757 --> 00:05:21,938
Let's add some code to look at
the language value now,

81
00:05:21,938 --> 00:05:24,414
to make sure you're really getting this.

82
00:05:24,414 --> 00:05:29,599
Inside the listener, I'll store
the language in a `lang` variable.

83
00:05:31,769 --> 00:05:34,546
Ugh, look at this indenting,
this is horrible.

84
00:05:34,546 --> 00:05:36,891
Let's just line these things up.

85
00:05:36,891 --> 00:05:38,842
Okay, so...

86
00:05:38,842 --> 00:05:41,453
[typing]

87
00:05:46,773 --> 00:05:51,234
And you'll notice that I am naming
my variables the same thing as my IDs,

88
00:05:51,234 --> 00:05:55,291
but that's just what I'm doing,
you don't have to do that.

89
00:05:55,291 --> 00:05:59,787
Now I want to output a different message
based on what language they picked.

90
00:05:59,787 --> 00:06:03,627
Notice the value isn't
what's shown in the drop-down.

91
00:06:03,627 --> 00:06:06,880
It's the value attribute in the HTML.

92
00:06:06,880 --> 00:06:11,250
So `lang` should be either
"en", "es", or "plt".

93
00:06:11,250 --> 00:06:17,212
So that means:
`if (lang === "es")`,

94
00:06:17,212 --> 00:06:23,684
then the greeting should be "Hola,".

95
00:06:23,684 --> 00:06:26,809
Let's go ahead and make this 
`greeting` variable here.

96
00:06:26,809 --> 00:06:35,105
So then `greeting` will be
"Hola, " plus the name.

97
00:06:35,105 --> 00:06:41,218
And then if the lang equals "plt",
good old Pig Latin,

98
00:06:41,218 --> 00:06:48,538
the greeting should be,
"Ello-hey, " plus the name.

99
00:06:48,538 --> 00:06:53,167
and then we can just
use an `else` for our English.

100
00:06:53,167 --> 00:06:55,366
I'll just move this in here.

101
00:06:55,366 --> 00:06:56,799
All right.

102
00:06:56,799 --> 00:07:00,374
Ooh, and if you want a
fun bonus challenge,

103
00:07:00,374 --> 00:07:03,840
try making a Pig Latin
converter for names,

104
00:07:03,840 --> 00:07:07,678
so that the entire greeting,
including their name gets translated.

105
00:07:07,678 --> 00:07:10,009
That'd be pretty neat.

106
00:07:10,009 --> 00:07:13,295
Now pause the talk-through,
enter your name,

107
00:07:13,295 --> 00:07:19,098
pick a different language, and try it out.

108
00:07:19,098 --> 00:07:20,239
Neat, huh?

109
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:

110
00:07:24,691 --> 00:07:27,316
word games, number games,
story makers...

111
00:07:27,316 --> 00:07:30,029
and if you do have a server
outside of Khan Academy,

112
00:07:30,029 --> 00:07:33,447
you can use JavaScript to do
pre-processing on form input

113
00:07:33,447 --> 00:07:35,361
before sending it to a server.

114
00:07:35,361 --> 00:07:38,522
There are also a lot more events
you can listen to on forms,

115
00:07:38,522 --> 00:07:40,701
like keypress and focus events.

116
00:07:40,701 --> 00:07:44,152
Just remember to look at
the value of the inputs,

117
00:07:44,152 --> 00:07:47,289
and to check that value at the right time.

118
00:07:47,289 --> 00:07:50,031
You'll get to practice that
in the next challenge,

119
00:07:50,031 --> 00:07:52,644
which is a personal favorite of mine.