So then I already have a little bit of HTML set up right here, just a form with a class of signup form.
Then we have an input type of text with an ID of username and a placeholder of username.
The placeholder is just some faint text that tells the user what goes in that form field.
Then we have an input type of submit down here with a value of submit.
So this one is important.
This gives us a submit button and when a user clicks on this, this fires a submit event in JavaScript.
Now I also have a bit of CSS already created, not much, just the body background.
We also have a form max width of 200 pixels, margin of 40 pixels, top and bottom, a background of
white, a padding of ten pixels and then the input themselves.
We have a display of block, a margin of ten pixels, top and bottom and a padding of four pixels.
So if we take a look at this in the browser, it looks something like this.
Okay, so what we want to do is listen for this submit event.
Now, if you cast your mind back to the last chapter where we looked at click events when we wanted
to react to some kind of click event, what we did is attach an event listener to the thing that is
being clicked.
Now, in our case inside the form, this is the thing that's being clicked and if we were listening
for a click, we would attach our event listener to this input right here, this button.
Now, when we're listening for a submit event, we do not attach our event listener to the submit button.
Instead, we attach it to the form because at the end of the day it's the form that is being submitted,
not the submit button.
The button doesn't get submitted.
We just click that and then that submits the form.
So when we're listening for a submit event, we attach the event listener to the form itself and not
the submit button.
Okay.
So then over to the code.
Let's do this.
First of all, I'm going to get a reference to the form itself using this class right here.
Sign up form.
So we'll say const and we're going to call this form equal to document.queryselector like so.
And we want the form or the signup form class in there.
So now we have that form and we can go ahead and add an event listener to that form.
Now the event we're listening for is a submit event when the form is submitted, i.e. when a user clicks
on this or if a form field is in focus, if they press enter that fires a submit event as well.
And that's one of the benefits of using a submit event instead of a click event.
Because if we just attach a click event to the button, then it's only going to react to that click
event.
If we attach a submit event to the form, then any way of submitting the form and it's going to react
to that.
So whether we press enter on a form or submit, it doesn't matter.
It still fires that submit event anyway.
Now we have that event listener hooked up.
We need to create our callback function.
We are going to take the event parameter into this callback function because we're going to use that
in a minute.
So then first of all, what actually happens when a form is submitted in the HTML document?
Well, the default action is that the page refreshes.
Now that might seem a bit weird to you, but that is the default action.
So if I submit something here, you'll quickly see that the page refreshes very quickly.
Watch this submit and you'll see up here that we have a little flicker.
So watch this again, submit.
And you saw a little flicker.
So what we want to do is prevent that default action.
We don't want the page to refresh.
We want to handle the submit event in our own way, not the default way of a browser.
So to submit the default action of a particular event, what we do is take the event object and we use
a method called prevent default like this, and that prevents the default action of a particular event.
So the default action of this event of the submit event is to refresh the page.
Now we're preventing that default action.
So if we try to submit now, no longer does it refresh the page so then we can come down here and do
something that we want to.
Now we can go out and maybe get the data from the form field over here.
So how do we do that?
First of all, we need to get a reference to this field right here, the actual input field.
And I'm going to show you a couple of ways we can do that.
The first way we already know is to use the query selector.
So I'm going to say const username and set that equal to documents dot query selector and we're going
to pass in the username ID because that's the ID I gave it over here.
So let's pass that in their username.
And now we have a reference to that.
So now we have a reference to that.
What we want to do is get the value from that particular input field from the username input field.
Now, when we get an input field like this from the Dom, we can use a property on it called value and
that gets us the text that's inside it, not the placeholder.
This is the placeholder right there that's already in username.
But if I type in some text like Sean, then the value property will get us that text from the form field
from the input field.
So I could say now console dot log and we're going to take the username, which is the input field reference
dot value and that gets us the text inside it.
So if I save this now, I'm going to come over here and type in Mario and press submit and we see the
value logged right there.
Cool.
So that's the first way of getting this input field.
We don't always have to though, create a separate query selector for an input field if we already have
one for the form.
I'm going to show you another quick way we can do that.
So let me just comment this one out.
And instead, when we have a form and we have a reference to that, if we have input fields inside that
form which have an ID like this, we can just use dot notation to grab these fields.
So this ID is username.
So if we go over here and I say, okay, well I want the form, then I want the username field, I want
a reference to that field, I can just say dot username because that gets the form that we have already.
And this looks at the ID right here and says they match.
So I'm going to get you a reference to this input field.
So that's a nice quick way we can get fields from a form using dot notation and the ID so I could say
console dot log and we want the form username, but we also want the value from that.
So we can say dot value again to get the value.
And this is going to do hopefully exactly the same thing.
So let me type in Luigi Submit and it still gets us that value.
Now we can do this with IDs and we can also do this with names.
So it doesn't matter whether you give it a name property like that or attribute rather, or an ID attribute.
Either way, it's going to look for that when we use dot notation.
So this is still going to work because we have a name of username and it's going to look for the name
or the ID.
So if I save it again, let's try one more time.
This time do Yoshi and I'm going to press enter to submit.
Now press enter and we get Yoshi.
Sweet Summer friends.
That's how we can react to a submit event on a form.
Now the next logical step is to make sure that the data a user types in is valid.
For example, we might want to check that the username is at least six characters long, or maybe it
contains only letters and numbers, no spaces or other characters like the At Symbol.
And to do that kind of validation, we'll be using regular expressions.
So we'll discuss those in the very next lecture.
