Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed jQuery Basics!
You have completed jQuery Basics!
Preview
Use the val() method to retrieve data from an HTML form field.
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video, we learned how
to use jQuery to get, insert, or
0:00
change plain text or HTML on a webpage.
0:03
But what if we wanna get and
do something with information from a user?
0:07
To build this blog previewer, we'll want a
user to be able to fill out this form and
0:10
when they click on this preview button,
0:15
display what was entered
over here on the right.
0:17
The HTML and text methods can't be used
to get information from form inputs
0:21
such as text inputs and text areas.
0:25
So how would we get and
preview information from a user?
0:29
We can do this with jQuery's val method.
0:32
Let's go back to app.js.
0:35
Right now, we've got some baked
in values for the preview.
0:37
Let's comment out all this code for now.
0:40
So we want all the magic to happen
when this PREVIEW button is clicked.
0:45
So let's start by selecting the PREVIEW
button and adding an event listener to it.
0:49
If we look at the index.html file,
0:55
we can see that there's a button
element with the ID of previewButton.
0:58
Let's head back to app.js and
use jQuery to select that element.
1:05
Then we'll use the click method and
1:15
pass in a function that will be called
when the user clicks on the button.
1:16
So remember, what we're saying here
is when the element with the ID of
1:29
previewButton is clicked,
do something here.
1:33
Now let's see how the val method works.
1:36
Everytime the preview button is pressed,
1:40
let's log out the value of the blog
title field, which is this field here.
1:42
If we look at index.html again,
1:49
we can see that the title field
has an ID of blogTitleInput, so
1:51
let's start by selecting that
inside of our click handler.
1:56
Then we'll call the val method on it and
2:07
that will retrieve whatever
the user has typed into the field.
2:09
Then we can save it to the variable title.
2:15
Now let’s log out titles so
we can see what it gives us.
2:19
I’ll save, go to my browser, refresh,
and open up Chrome Dev Tools.
2:26
Into the TITLE field,
I'll type This is my title.
2:35
As you can see,
everytime the button is pressed,
2:43
we'll return whatever has
been typed into this field.
2:45
Great.
2:57
Now we can do the same thing
with the blog content field.
2:57
Use the value method to
grab the user's input.
3:01
This field, as we can see,
has an ID of blogContentInput.
3:04
So let's select that.
3:09
Call the val method on it and
save it to a variable called content.
3:12
And let's delete this for now.
3:16
Now we can move these two lines
inside of our click function.
3:29
So what we're saying here is that when
this button is clicked, get what the user
3:40
has typed into these two fields,
the TITLE field and the CONTENT field, and
3:46
set that content to the blogTitlePreview
and blogContentPreview elements,
3:51
which are these elements right here
in our HTML, this h2 and this div.
3:56
So let's save, go back to the page,
refresh, and I'll close this for now.
4:05
And type something into this fields to
see if we get the expected behavior.
4:12
Excellent, it's working,
we have a blog previewer.
4:26
Now we can copy and paste the code for the
flash message into the click handler so
4:32
that the message only displays
when the button is clicked.
4:36
Now as you can see,
this doesn't quite work.
4:54
And that's because we need to
make sure that the message is
4:56
only hidden on page load and
only displays when the button is clicked.
4:59
So let's select the message div and
hide it outside of the click handler.
5:05
And we can delete this and
save and refresh the preview.
5:24
And awesome.
5:41
Our simple blog previewer and
our first jQuery program are complete.
5:43
Congratulations.
5:48
You've just built your
first jQuery project.
5:49
In the next part of the course,
we'll learn much more about jQuery events.
5:53
We'll also learn about more
complex jQuery selectors,
5:57
quite a few more jQuery methods and
build a fun spoiler revealing application.
6:00
I'll see you there.
6:05
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up