- What is jQuery? 3:10
- jQuery: History and Relevance Today 2:51
- jQuery vs. JavaScript 6:02
- Review: What is jQuery? 5 questions
- Animating Elements with jQuery 7:43
- jQuery Syntax and Animation Effects 2 objectives
- Blog Previewer: Changing Content Inside Elements 7:13
- Using text() and html() 3 objectives
- Blog Previewer: Getting Values from Form Fields 6:06
- Getting Values from Form Fields 2 objectives
- Introduction to jQuery Review 5 questions
Preview
Video Player
00:00
00:00
Blog Previewer: Getting Values from Form Fields
6:06Use the val() method to retrieve data from an HTML form field.
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