In this video.
Let's talk about form event types.
But I regard this particular video as how to handle forms.
That is, we are going to use some of the form event types to handle forms.
Well, this particular video of how to handle form is really, really important you need to pay attention
to because with this concept we are you can build complex application and if want to be a full stack
developer, handling form is the first thing we need to be familiar with.
So let's get started.
This is a project that we are going to build to show you in and out how to handle forms well.
So let's get started.
So you can see that when I refresh this particular project or form, there is no information going on
here.
So one cool thing I like about this application is that we'll check it out as soon as I focus all my
input.
It tells me that you are typing.
And I believe you've seen this kind of functionality in most of the chart applications.
This is possible because of form or input event type.
But the cool thing is that how are we going to handle the actual values?
A user entered into the form.
So let's say that this is a form for adding product to our website.
So after entering all this data, we need to send the data we've entered to our server of which we are
going to create when you get back to back end development.
The main objective is how can we get the values we type in here?
Like that.
So let me try again first.
So let's say that let me start providing some product name.
So let's say that this is a mock.
And then the price is $5,000 and then quantity is, let's say, ten.
And description, I would say the best.
Laptop.
Laptop and then I would select the category and the electronics.
So the good thing is that when I hit submit, I want to take these values, okay.
And send it to a server for processing.
Okay.
But for now, let's just take the value and dump it into the console.
That's what we are going to do.
So when I open the console and when I hit submit, it will see that the values I entered has been displayed
here.
So I can take these values and do whatever I want with it.
I can check validation or any logic I want to implement in this.
So this is what we are going to do.
And then as soon as I click on Reset, check it out and see that I have emptied my form.
That is good, right?
So let's see how we are going to build this particular project.
So always, since this section is about HTML and CSS, I have provided the HTML for you.
All right.
So let's go through the semantic of our syntax for HTML.
We have H1 core form events, which is this one, and we have one, two, three, four, five input
field one being select input field that we have here.
We have the first input that is the product name.
The second input is the price of the product.
The third input is going to be the quantity of the product, and then the next one going to be the description.
And lastly, the option or the category.
So this one tool we have talked about before, how to create a form.
Great.
And you can see down here I have added two buttons.
One is submit and one is reset.
It will see that a button can be saved for different purposes.
It can use to take an action for deleting, or it can be used for submitting data to back end.
Or it can be used as research in form.
So the type you provide into a button determines the functionality or what the button supposed to do.
So for this one, we see that we provided reset.
It type reset.
So this is not me or you who made it.
That is from JavaScript.
So that is about a syntax for the HTML.
So now back to the JavaScript again because I have taught you how to select elements, this one to have
done it for you.
So let's look through.
We see we have the class name for the individual input field.
So this one is going to be product name P name, product name, product price, product description,
product quantity, category and message is this P tag here?
That's what we see when I type.
Check it out.
You see that when I start typing, I have the message that's functionality for this text.
So that is it about a select.
So let's come back to the JavaScript again.
Now the first event that we will talk about is called On Change.
So these are the commonly used for event, but the most common ones are the change and submit, focus
and on play.
I can see four of them by list.
Let's see five.
These are most commonly used ones.
So let's start with the on change event.
Where on change event is an event that is applied to input fields.
For this of this input, we have a method or event called on change.
So let's select the first one, which is the P name which represents the first input field, which is
this one.
See, I have a class of P name.
That's what I have selected it here.
All right.
Let's start with on change event type.
So what is on change event type?
The on change event occurs when the value of an element has been changed and this event type can be
used with any input field, for example, select text area and many more.
So let's see how we are going to implement this one.
So like I said, we are going to target the first input field with the class name, p name if you check
it out inside the semantic or for form.
This is the input field that I want to target that is with the class P name.
So I have selected that that is P name.
So for all input fields, we have all the events that comes after dot or period.
So for this input field, what we want is call on change, which is equal to my custom function as that.
And here we go.
The same logic I have access to the event type as E, but for the meantime let's just console.log a
text and say that.
On change.
Ties.
Okay.
Great.
So let's see now.
Let's open the terminal.
Sorry, the console now, because I have selected the first one.
This is what the event is going to be fired on.
So when I type in anything, then I click outside.
You can see that we have on change has been okayed because right now I have caused change to this input
field.
That is why I have that.
When you say a value, remember all input field has a value property.
If I want to have a default value, we can say that value is equal to let's say I mark.
So when I save it by default, I'm going to see this.
I mark if you don't provide it means is undefined or empty string.
So in that case, if I type anything here, it means that I'm causing change to the value.
So as soon as I click outside, it means that on change has been occurred.
That is it.
So with this one we can also take the text.
We type in here or just display some text and says that you are typing.
As soon as I click inside, I will display a text that you are typing, or when I click outside I will
say that you have stopped typing.
Do you get it?
Yes.
So that is it about the on change.
So let's move on.
The next event type, which is the most important one we need to pay attention to, is what you call
on submit.
Great.
So on submits or case when a form is submitted.
Right.
So let's say that you want to submit a form or a data to our server for processing.
We are going to use the method called on submit.
So here we go on submit.
Great.
So the way this one works is that we need to select the entire form, this form, because this what
we are targeting the form.
So the form wraps everything inside it, right?
So if we target the form, we have a method called on submit.
It means that it's going to submit every value inside the input field of this particular form.
So we are going to select the form.
We can do it up here.
So let's save const form now is equal to document dot query selector and our target the form.
Has that.
So if I console.log the form, you can see that I have the form which is my HTML.
Symantec has done so on this form.
That's where we are going to add our event lists on so form dot.
Now the method we want is called on submit or lowercase and is equal to my normal function.
That is anonymous function and I have access to E and I start.
So when I console.log, let's say that form.
Submitted.
Great.
So let's see.
Now, let me open the console or let me remove this console log and let me also remove this event type
here for the meantime, and let's focus on this.
So check it out.
Let's reduce the screen size here of my console.
Now, as soon as I click on submit, you see something happens at a flash, I see the result.
Put your eyes here.
When I click submit you can see that something happens, but all of a sudden it disappeared.
So we need to avoid that.
And we have a method called prevent default.
So this is default behavior, meaning when we submit the browser refresh, put eyes here also on this
icon here.
As soon as I submit the form, check it out.
You see that it refresh it, you see.
And we don't want that.
We need to prevent this kind of default behavior of the browser.
And we have a method called e dot prevent default.
So let me give you a comment here is really important.
Pay attention to this, which is prevents the default.
Behavior of the form behavior.
Behavior of the phone.
So here we go on e, we have a method called Prevent.
Default type it as we see on the screen.
So with this one, check it out when I click.
You see that nothing seems to be refreshing.
Therefore, we can have access to the text we are requesting or we are accessing all we want.
When I click on Submit.
Now you see that I have it being displayed on line number 29 or my code form submitted.
So it means that we can do any logic here by taking the values we type in here and then we can console.log
it or we can send it.
So how can we get a value from these forms as simple as this?
So here gets the value for the input.
In peut feels great.
So let's start with the name.
That's the product name, right?
So it's going to be commerce can give it as product name or name is equal to.
Now I want the first value for my first input field going to be.
P name.
There is a product name and on that we have a property called value.
So all selected impute element.
We have a property on this selected impute as value and that one contains the value in the form.
Before I do this one, let me come up here and let's console.log this p name here.
Our first P.
Talk or p impede your eyesight.
So check it out inside the cone so you can see that we have the PPI.
And if I scroll down, we have a value that contains the text or the data inside the form.
So scroll down.
We have a bunch of methods here, but what we want is this.
You remember we provided a value of iMac.
Check it out here.
This is what I'm referring to.
So I don't want to give it a static value here, but instead I want to give a value.
When I type in here, I can get a value.
I'm typing from this form so we can do that inside our submit handler.
So let me move this one.
Now you know how we can get a name.
We're going to be as.
The product name dot value.
You start in the console now and this one is for the product name.
I can copy this one and I want to get this one.
They put up price this one.
So which is also also up here, price description, quantity category.
And then the message in the form, no form here.
Okay, the message if no message there.
So here, let's continue.
So here.
I want the price here.
So I would target P.
Is this price?
So price going to be the p price.
P price.
And then I want to get the description.
So we're going to be description.
Which is also.
Product description.
And I also want to get the quantity.
So the same is going to be key with UI going to be product quantity here.
And let me show you one thing about this select, because it's really important here for the Select.
Have a look.
You can see that we have the Select here and inside we have the options.
So for this one, how can we get the value?
Because whatever we select is what we want to send or what we want.
So inside here you can see that we've given it on the parent of the select.
We are giving it a class of category and then inside it we have options.
And for the options we have a value.
As we explained before, this value is is what is going to be accessible inside our form, but not this
one.
So what if I type in here?
It's going to be the exact value we are going to receive from the JavaScript when we send grade.
So back here, remember we selected the category.
So we're going to be the P category or just category going to be?
Yes.
Which is this one?
Yes, this one.
There we go.
A class of category on this select.
So here are going to be the category or cut for short.
So for this one, I can console.log all the text, I can put them an object as that or just dump it
as name.
Here we have name, we have price, we have description, we have the quantity here and we have the
category.
So this one, check it out.
Let's open the console.
Now, when I type anything, this is going to be my Apple laptop.
The price is $2,000 and then let's say the quantity is five.
Description is the best the best product.
And then the other category is electronics.
When I click submit, it will say that from submitted and I have all the values I type in here.
If you want to display them as an object, let's wrap everything in an object as that.
So let's see.
Let me type anything here.
Yes, we know what we are now.
When I sent you see that I have the values down here.
That is it.
Maybe I'm thinking that for the final one.
You see, I display some text.
Well, because I use the play and focus.
So let me do that because this one is the most important part, how we can get the values.
That's why I took my time to explain.
And let's let's work on the on the reset here.
So let's see how we can implement on reset.
And it's also as simple as that.
So the same concept is we are going to copy this one.
Or better still on reset here we can add the event inside it on the form dots on reset on reset and
is equal to my function as that we can create this function outside this particular function.
So let me do that one for simplicity's sake.
So the same thing here.
So I'll copy this one like that.
And now come down here and then here is going to be as on reset, reset.
So on reset.
I want to empty the values, right?
I want to empty the values.
We're going to be this one.
So here we go.
Let me remove this one.
This one, this one, this one, this one.
And you say the value.
Suppose the value is empty and this one to the value is equal to empty string and the value is equal
to empty string.
The value is equal to empty string and the value is equal to empty string.
So with this one, let's see when I click, let's try to console.
Look at text here.
And says that for.
Reset it or reset?
Okay, great.
So let's see when I click on the this form, you see that I see for reset because it means that we are
giving this button a specific type.
So this button is going to be called, but instead is reset because instead of H.M., you provided a
reset.
So it knows the kind of button you are clicking on.
So like I said, let's say that we want to do the reset as soon as we submit the form, right?
So what we can do is that we can bring this one here and inside the form here.
And how can say that?
I mean, reset after I submit.
And now it's down here like that.
Great.
So this one is the same thing as implementing this logic, so I can even comment this one out now and
check it out because JavaScript read from top to bottom.
By the time it gets here, you've already seen our value.
So let's see.
So let's tap anything here and let's see when I click submit you see that everything is gone.
That's another way we can implement select.
Well, maybe thinking that you want to see you are typing something like this one.
Well is this one is possible because of an event called on focus.
So any input field that you want to trigger this event, you need to select that.
So I will come down here and then give it another event type call on focus.
On full course.
So here we go.
The same the product name input field and the name of the event is going to be on focus so on.
Focus is equal to my normal function.
And let's just console.log.
Let's say for.
Full cost.
Okay.
So let's see.
Let's open the console.
This one.
Now, let's refresh it.
You see, as soon as I move or I click inside, this particular input has been focused, meaning it
has been activated.
So with this one, as soon as I click inside, I can display a text that you are typing or you are about
to type.
So I will take this one.
I want display the message into this element here, or message of which I have selected it here as message
grade.
So inside that I can display any text and say that you are typing.
So let's go.
So inside the input here, I will select the message and in a HTML or text content.
Now is equal to I would say you are typing.
So here you go.
You are.
Typing.
Let's save it and let's see what we have.
When I click inside, it means that it has been fixed, right?
So we can add any emoji as we did before by going to Q symbol dot com and you can copy any image of
your choice.
So let me copy this green heart and I'll put it here.
I'll start.
So check it out when I.
When my input gets the cars.
I see.
Let me add three dots here to show that yes, I'm typing and indeed I have it, but when I click outside.
We need to trigger an event called on Blair.
And Blair means that if you click outside your input field, meaning it has lose focus.
So that is what we call on.
Blair So the same thing, target the same input, hear my product name.
So instead of.
So instead of on focus is going to be on blur.
So on blur to I will say that you have stopped you have stopped typing.
And let me give it a different emoji.
And this time around, I will say broken heart.
Yes.
And there you go.
Now check it out.
Lets start typing.
Click away.
Now we have stop typing.
So the take away here or what I'm interested with is the the submit how to get the values is really
important guys and this one to the play on for are used for user experience.
Now that you have all the tools we need is time to build awesome project.
Now from beginning of this call from a HTML, CSS JavaScript, the DOM functions.
Now you have all the tools to get started to build or some projects to improve or to enhance your portfolio.
All right, guys.
So let's start at the next video to start to build project.