jQuery Tutorial - 25 - Basic form field selection Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' dog
with a video tutorial for the new boston
in this tutorial we're going to look at
creating a very small sample application
based on what we've learned about jQuery
selectors we're going to be creating a
form which allows the background color
of each field to change when it's in
focus and then when we are out of focus
the background color will change back to
white so we're creating this and showing
I'm essentially showing you how easy it
is to create something like this with
jQuery selectors and referencing text
types so we'll first we'll go ahead and
build our form and then I'll go through
a bit more about how this works and what
we're doing so I'm going to create a
form action and I guess the method
doesn't really matter and then I'll end
the form just here ok so inside I'm
going to create a few field so I mean
first we're going to say name and we can
break down and that's just against
around that in paragraph tags so just
building up a form that you might
usually use on your site
now this type is text and that's the
selector that we're going to be using in
jQuery so let's go ahead and create some
more fields will create about three
fields we'll say name email and input
type equals text and we'll go down and
we'll create let's just uh no we'll just
leave it at that so almost like a a
newsletter submission form I guess so we
create our last element which is a
button and we can go ahead and give this
an ID of news letter button
okay so now that we've done this we can
go ahead and preview this in our browser
let's give that button a value before we
go any further so we'll give this a
value as sign of sign up okay so now
we're in our form there's two things we
want to happen we want our text field to
change as we either tab down tab back up
to them or simply click on them or click
on another field and when we click sign
up we want this button status or the
value of this button to change and then
what we want to happen is so the button
is disabled so let's go ahead and look
at the form fields first now we need to
create an event and not an event well we
only need to create two event handlers
and the first one is focus in and then
the last one is blur so we're going to
use the blur to change the background
color back to white and the focus in is
going to change the background color to
say yellow for example and we're going
to be doing this using the CSS
manipulator
so inside selectors j/s which we have
included down here we want to go ahead
and start to create our focus in now
we're going to choose the type of text
so for every text field on this page
which includes this one and this one as
well we want to go ahead and change the
background color once we've focused in
so we use the focus in event handler and
then inside here we create a function we
pull that just down a bit and then we
can start writing the code when we focus
in so we want to select this dot CSS
remember this will refer back to the
current field itself if we were to for
example do text then despite the fact
that we may be clicking on this field
both of them would then
apply the CSS action we've specified
here so we only want it to happen to the
current field that we are and we have
clicked on or the current field that
we've tabbed down to so the current
field that we focused into essentially
so we supply the CSS function with two
parameters the first one is the part of
the element that we want to change so
background color