jQuery Tutorial - 30 - Enable submit button after file selected Video Lecture | Importance of jQuery in Website Development - IT & Software

so this takes the attribute value which
will be C colon backslash fake path and
then the image I choose so if I click on
that you can see you've got C colon
backslash fake path backslash Tarson jpg
so now that we know that this well I
mean that was sort of some useless
information I guess in sense of the
tutorial but the reason that this change
event handler works is because the value
attribute is added so as long as you
know that you'll understand why we
actually are using this event handler
but overall the you know the notation of
change is quite you know easy to
understand so now what we want to do is
go ahead and change this submit button
so with the idea of submit we're going
to reference it as hash submit we want
to remove this attribute here so the
first way we can do it is change the
attribute or we could go ahead and
remove it so I'll show you both and you
can decide which one you think would be
better okay so once the file has changed
we want to select submit and then we
want to say attribute disabled none so
this will change the value of the
attribute name disabled to nothing so
let's just go ahead and look at that
let's click choose file and let's choose
tartan dot jpg bear in mind this upload
button is still or this upload submit
button is still disabled when I click it
and nothing's happened so let's check
check what might have happened so hash
submit to attribute okay so I think
perhaps we we might not be able to
actually use this so let's go ahead and
use remove attribute instead and here we
just specify the name of the attribute
to be removed so disabled let's go ahead
and try that again I'm going to click
Choose file click Tartan jpg and you see
that the attribute for this upload
button has been removed and therefore it
we can now click it and submit our file
so that's the first way that we can go
ahead and do it by submitting individual
IDs now what happens if you always had
an input file here
like an input type file and you always
had a submit button afterwards now you
could go ahead and set up your form like
this you could even set it up without
disabled like this and you can have
jQuery automatically do this all for you
so let's go ahead and just get rid of
this here now let's just assume that
like I said if you are regular regularly
including as part of your page on any
page on your website an input type of
file and an input submit type as well
now let's just like I said assume that
we are doing that we're going to use a
general selector to select all input
fields with the type file so let's go
ahead and use a selector so it's an
input selector this would select all
input fields but this time I want to
specify a type inside of here which is
file so now I can say dot next and
essentially what this will be doing is
it will select this file here and the
next will be this next element here so I
can say any element after this I next
I'm going to change the attribute or
create the attribute disabled to equal
disabled so at the moment this input
submit button doesn't contain a disabled
attribute however once we've selected
any file or the next submit button after
this will be you know will be given this
disabled attribute so that's now refresh
and you can see that that button has
been automatically disabled so any input
of the type submit' or any any element
essentially after this will be disabled
ie our button so now what we can do is
come down to
well we actually would append it back
onto here so I can say dot change or
sorry dot I think we would have to dot
dot previous dot change and then in here
we can create a callback function in
actual fact let's change this around all
together I'm going to go ahead and I'm
going to say I'm just going to get rid
of this and I'm going to say dot change
now as we did before we appended this
event handler on but now after this I'm
going to add this and now in here I can
go ahead and create my function so let
me just run along I'm just going to pull
that down and I'll just explain what's
happening so we select our input type we
append an event handler onto it
but while we're doing that we select the
next element remember the submit button
and we give it that attribute so it's
still worked as you can see but we can
apply an event handler here as well for
example alert changed when we go ahead
and change something here we get this
alert box up so we know that that works
now so as well as an pending on an event
handler we've also selected the next
element and disabled it okay so now
inside of here we want to go ahead and
enable this once it changes so now all
we'll have to do is say this dot next
dot remove attribute
disabled so once this element here
that's been selected ie all file types
across our page have changed the next
element along which is currently
disabled we remove the attribute now it
may look like oh okay well once this
event takes place we're then going ahead
and removing the attribute but then with
you know disabling it this change
function or this change event only
happens once it's changed this happens
regardless it will even though the
change event handlers before this will
always happen so we won't get the
problem that it will be reduce abled for
example so I'm going to go ahead and
choose two Tartan jpg and you can see
that the upload button has been enabled
so that's just a quick bit of
information or a long bit of information
but in detail about how we can use this
we went for the ID selection before and
now we've used this input type file
selection and this would work globally
across your script as long as you had an
input type with or an input field with
the type file and an input type with the
type input field with the type submit'
so this will now work globally doing it
this way however if you're only doing
this once off you can apply an ID or a
class and select it that way