jQuery Tutorial - 35 - Submit 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
submit event handler in jQuery now the
submit event handler essentially just
checks for a form submission so in this
tutorial I'm going to outline an example
of an email newsletter sign up we're
obviously not going to be creating the
functionality to actually sign a user up
however we're going to be creating the
outline of this so that you can go ahead
and validate and then insert a data into
a database for example so let's go ahead
and outline the or draw up the HTML for
this just so we know what we're doing we
can see the example on the screen I'm
going to create a form with an action of
hash so we don't actually submit the
form I'm then going to give this an ID
as sign up underscore four I'll go ahead
and end the form and now we have our
actual form now remember the idea is
where we reference so we're going to be
referencing signup underscore form when
we check for the form submission go
ahead and create a couple of paragraph
areas paragraph tags and I'm going to
put first of all in here email and then
an input area so an input type of email
the idea of this is going to be user
underscore email and in this paragraph
area I'm going to put the registration
button or the submit button so sign up
sorry submit there and the value
sign up so some pretty standard markup
quite easy to understand so when we type
in the users email or the user types in
their email we want to click signup
you'll notice that I'm using html5 so if
I was to example type Alex and press
sign up html5 automatically validates
the email address on the front end for
us
however if they if you were to exam for
example use this as just text you would
you would and not have that validation
in place so let's go over to our text
editor and start to think about what we
need to do and we first of all need to
create an external javascript file which
is going to handle the event so let's
create a new add file in our text editor
and I'm going to call this submit Jas
now that we've got submit is this is
where our event handler is going to be
placed however we need to include this
into our page so let's go ahead and type
script type equals text forward slash
JavaScript the source is going to be is
forward slash submit is and we can end
the script there so now that we've
included submit jsr into our into our
page we can actually go ahead and start
to write this now the first thing we
need to do is check for the event hand
handler we need to check that the submit
has happened on the forum currently if
we check we click submit and nothing
actually happens
so inside submit is we need to create an
event handler for this so we used dollar
and then inside we reference the form
that we want to use the sutter the
submit event handler on which is signup
underscore form signup underscore form
now we need to use dot submit as the
event handler inside the parentheses we
need to create a function that's going
to be run when this event handler is
triggered triggered so that's function
and then our block inside of our block
we need to write our code so we can just
pull the
down now instead of here we want to
write the code that's going to be
performed when we actually submit the
form so at the moment we could test this
by saying alert and submitted so inside
of our browser let's refresh and click
signup you'll see that we get the alert
box submitted so let's return to our
text editor and start to retrieve this
email value here and then we can relay
it back to the user now we want to relay
it into an inside of a div which is just
below the signup form so I'm going to
call this signup feedback now the reason
I call it signup feedback this could be
an area for example where you want to
feedback either an error or a
confirmation message to say that the
user's email address has been registered
so we're going to pull that up for now
because we're going to use the jQuery
HTML function to insert our feedback
into here so inside submit j/s we want
to first of all take the value of the
user's email so I'm creating a new
variable called user underscore email
and that's going to be equal to again
the reference of sign oh no it's not
it's the reference of user email
remember so user email dot Val we use
the valve function to take the current
value inside of this field here so now
that we have this user email variable
stored we can go ahead and relay it back
into our user our signup feedback div so
we reference this again with a dollar
sign and inside of here
signup feedback then we can say dot HTML
and inside of here we can put some
string data that the HTML that we want
to put into the div so for now what I'm
going to do is I'm just going to type
something like thanks your email in fact
now we can just say thanks
and then plus so it appending on a value
and that value is user underscore email
and then plus to append the rest of the
text has been signed up so bear in mind
that if you wanted to actually create
this into a functional application and
actually store this email address you
would write the you would write the code
say here for example an ajax request to
post this to a PHP page which would then
in turn insert the value into the
database or it would return an error so
you would create this code here however
obviously in this tutorial we're just
looking at the event itself so we're not
going to actually get into that so now
what's going to happen is once the form
has been submitted we grab the users
email referencing this email field here
and we then relay it back to the user
inside the sign up feedback div that we
created under the form so really this
could go anywhere for example up here it
doesn't matter where we place it it's
still going to reference that object so
let's go ahead and refresh when I click
signup we don't have any validation in
place so we will just get a blank a
blank email in our div however let's go
ahead and properly register so I'm going
to type in my email address and I'm
going to click signup oh okay
so the problem here is that the hash
obviously has actually submitted this so
I'm just going to get rid of that there
and refresh and we'll see if that's
worked so Alex at PHP academy' org and
then click signup and you'll see that we
get this message up here thanks Alex
stop Alex at PHP academy' de org has
been signed up so this is a front-end
example of how you would use submit to
actually handle a form submission in
jQuery and you can see that the
front-end is now complete we just don't
have the backend validation so just by
using the submit handler we've created
an email signup front-end
application if you like or front the
front-end design and the functionality
we just don't have the rest in place to
store the email