jQuery Tutorial - 53 - val Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
with a video tutorial for the new Boston
in this video we're going to look at the
jQuery valor attribute essentially what
Val does is takes a value from for
example a text field or other HTML
fields so to go ahead straight along
with the example I'm going to go ahead
and create a text area where a user can
type for example their name and then
they can click a submit button and we
will return the value onto the page and
display this so this is a use of the Val
attribute and taking values from
specific fields so I'm first of all
going to create an input area and that
has a type of text the ID we're going to
give it an ID and we just say name for
example and then next to that I'm just
going to go ahead and create a button so
button will give this a value and will
also give this an ID we can give this I
will just call this button okay so let's
go over to our page and refresh you'll
see we've got a text field and then a
button saying display and what we want
to do is we want the user to be able to
type something into here click on
display and then just display the result
down here now obviously this example is
pretty useless however when you use the
Val function you can take values from
fields and perhaps then add them to the
data but add them to a database table or
store them somewhere else on the server
perform some manipulation perhaps in PHP
in the backend using an HTTP request
it's entirely up to you however for the
purpose of this tutorial I'm just going
to create this simple demonstration okay
so I'm going to create a div down here
and the ID will just say we'll just call
it area for now so what we want to do is
we want to take the text from here when
the button has been pressed and put it
into this area here so pretty simple
we're going to need to create an
external javascript file which when it
include just under here and that's going
to handle the
then of the button we're then going to
take the value from this text field by
reference of name then we're going to
place it into this div okay so let's go
ahead and create our external javascript
file I'm going to save that in my Jas
directory and I'm just going to call it
Val Jas okay so now that I've done that
I'm going to need to include it so I can
copy this here come down and paste it
and then just change this to Val a X so
now we have successfully included our
external javascript file into our page
underneath jQuery Jas
okay so inside of our browser we want to
type some text click display and it be
displayed down there so let's think the
first thing we need to do is create an
event handler for the button so we're
going to reference this button which
I've just called button we use that
doing a hash because we've supplied an
ID and then going to say dot click so
this is a set up our event handler when
the button is clicked we perform an
action and that action is going to be a
function inside of here the function
uses parentheses as normal and curly
brackets but we're just going to bring
this down so we can work inside of here
okay so now we what we want to do is
take the value from this text field so
remember we've called the text field
name so what we need to do is reference
this text field hash name and then say
dot Val now this has grabbed the value
from this here I'm going to want to
store this in a variable so then we can
apply it to the div that we've created
below so I'm going to write var name
equals so now the variable name in
JavaScript is equal to the value of this
text field so now the last step we want
to actually apply this to the div itself
because well anything that's typed in
here will then be relayed back down here
once we press the button so let's go
ahead and do that we first of all
reference the div area which is called
area and then we just simply write dot
text and then inside of here
so the text attribute or function if you
like is going to apply some text to a
particular area on your page you may
also use the HTML function but we'll be
looking at the text function slightly
later on in this series okay so now that
we've done this this is enough to
actually complete what we wanted to do
so let's go ahead and refresh our
browser I'm going to go ahead and type
my name in here and click display you
can see that alex has been relayed back
down underneath here so finally let's go
ahead and change this around so it's
slightly more exciting obviously when we
run this click function we only actually
grab the value when we've clicked the
button however if we were to change this
for example to name and we will change
click to key up this would automatically
take the event handle for when a key has
been pressed and then released on our
name text input field so now we've
eradicated the need for the button and
now what's going to happen is every time
a key is pressed and released we're
going to store the current value in this
name so we're now making things a bit
more dynamic so let's go ahead and see
that change and how it has affected it
as I start to type you can see that
every field is actually what every value
is relayed back to us and as well when
we delete it it goes as well so just
using the valve function on a field you
can actually just retrieve the data
inside of it and this works for other
HTML elements as well for example text
area if we have a larger text area we
might want to use this as well now you
can also go on and use JavaScript to
append lengths onto the end of this and
what this will do is name will now
become the length of the value that
we've retrieved so we can essentially
just bind different functions onto each
other
so we've reference name we've bound Val
on to this and then we've bound length
on to the end of Val so
our name is equal to the length of the
text area or the text field so now when
we type you can see that it just relays
the character count back to us so Vala
is an extremely useful attribute in
jQuery that simply allows you to get a
value from a particular field