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

and then the color of it and I'm going
to choose yellow okay so now let's take
a look at how that works and then I'll
show you how it wouldn't work if we'd
used our original way when we click on
it you can see it's turn to yellow when
we click on the other one you can see
that also turns to yellow however
they've both remained yellow so now we
have the problem that we want to create
this to you know change back to white
however as I mentioned before if we had
used text like that and we refresh when
I click on just the first one you can
see that they both change to yellow
because we've selected text and not this
which will refer to the current field
it's changed both of the background
colors to yellow okay so now let's go
ahead and use the blur out two or the
blur sorry to remove this yellow once
we've lost focus of the text fields so
inside of here we need to create a
function this is the blur event handler
and we want to do exactly the same thing
but this time we want to say dot CSS and
we want to change the background color
to white or we could use hash ffff
depending on your choice okay so this is
the first part of the example
application complete you can see I've
now clicked on it and it's turned yellow
when I move away it goes back to white
so I can either I can either click in
and tab down or and then I can click
away or I can click on this one and tab
up and you'll see that we get the
essentially the same effect so or the
correct effect so now that we've got
that sorted we need to change the sign
up button so when we click on it it
disables and shows a please wait message
so let's go ahead and select the button
element so this would happen for all
buttons on the current page and because
we're going to be using this it doesn't
actually matter what we do
well it doesn't matter that we're only
selecting all buttons on the page so
button click we need to apply a function
to this and inside of here we need to
change a few things so the first thing
we need to change is this etre which is
going to change the attribute of the
field the attribute that we want to
change is the field value at the moment
the value is sign-up what we want to do
is change the value to please wait and
then underneath here we want to change
it so we disable the button so we'll do
that in a moment once we've filled out
the form in Thailand we click signup it
changes to please wait however we can
still click on it now inside of here you
might want to add functions that
validate the form on the front end and
then obviously in the backend of things
you would validate again you might also
want to add functionality to actually
submit the whole form itself I'm not
going to show you how to do that in that
tutorial but it's quite easy to look up
so the last thing that we want to do is
go ahead and disable the button so we
use this dot atre again so we're
changing an attribute this time we're
changing disabled to true and we're not
supplying this inside string so it's not
string data its boolean data so once we
filled out the form and we have these
colors changing nicely when we click
sign up the button is disabled and it
says please wait so in this example
application we've looked at form fields
themselves and buttons themselves and
we're actually changing these based on
an event using the CSS functionality so
like I've said before this is extremely
useful to implement into your site
because then this will apply for all
forms that you actually create so
depending on what the forms for it will
achieve exactly the same effect as well
as this button as well but like I
mentioned before you might want some
kind of functionality in here to submit
the current
form because obviously at the moment
this button you know it's just disabling
itself and showing the text please wait