There's going to be a time in your life when you
have a form and it's supposed to do something,
but you actually have a button.
Type is equal to submit.
Submit this form and you have this button.
And when someone submits the form,
you want to do something,
maybe you want to disable the button.
You can totally disable that button if you wanted to.
So people can't click submit more than once.
That's a very common thing.
Or you can completely stop the form from submitting entirely.
Lets do an input here,
and let's do the value is equal to, That's I do a value.
Let's do a placeholder, Your name.
And when we view the form, this is all looks like.
So it's going to ask for your name and then you submit this form.
Now, for this example,
we're going to need to actually give this a name.
Name is equal to name and this is going to show up in your URL.
So when I hit submit and we're going to see name is equal to,
let's put my name as Bob.
And it says index.html.
Question mark, name is equal to Bob.
It's whatever you put in there.
It's going to be auto filled in the URL.
And it says be auto filled in the URL.
And so maybe we don't want that to happen.
Maybe we want something else to happen.
And what I'm gonna do is zoom back in here.
So what we can do is we can select this form.
And then we can say On Submit,
and this is where it gets interesting.
Function can take any event parameter and we've actually been ignoring this whole time,
but every event listener has an event parameter.
And we can say event dot prevent default.
And what this is going to do is say, hey, yes,
a browser knows that a form is supposed to submit anytime you click the submit button.
But when this form is submitted,
its going to execute this function first.
And we're going to say Take that event,
the submit event, and prevented from doing its default thing,
prevented from being itself.
And so now we can say console.log form was not submitted.
And I'm going to clean up this URL because we know that whenever we submit this form,
that it automatically add stuff to the URL and maybe we don't want that.
So let's go ahead and type Kyle As the name.
Submit this form.
You notice how the URL didn't change.
The page, didn't flicker that page and reload and it says the form was not submitted.
Now, honestly, at this point in time,
this is completely useless to you because why would you
want to prevent a form from being submitted?
Well, you wouldn't maybe you'd want to disable the button,
which we'll talk about down the road.
Maybe you'll want to add a different class to the button so it looks different.
So it looks like the form is submitted?
Possibly, yes. We'll talk about that down the road as well.
But the most common use case is when you have a form and you want to prevent it.
What you want to do is you want to grab that form and you want to serialize the data.
And then maybe you want to do some sort of ajax request.
So the form should not actually submit to index.html or wherever you tell it to point to.
Javascript can overwrite that and tell it to make an Ajax request to some other place.
Now we don't know about jQuery ajax yet,
so we can't talk about that just yet.
We're going to talk about that near the end of the course.
But for now, just tuck this in your back pocket because you're going to need it.
And you whenever you submit a form and you want to prevent some default action,
you're going to need to then grab the values from
the input or the text areas or the select fields.
You're going to want to grab that information and do something with it.
And that's what event dot prevent default does.
Now while we're on the subject of event dot prevent default,
what we can do is let's go ahead and select this button.
We know that when, whenever we press this button,
whenever we click submit this form button,
that is going to submit that form.
It worked for us before.
Surely is going to work again once we disable this JavaScript here,
we can do the same thing with Submit.
So let's go ahead and select that button.
Button. But taught.
But on,
when we click that button,
we're going to register a function.
And because every function secretly has an event parameter,
we can do event dot prevent, default.
And just as a heads up,
you will often see event as e. So whenever you see function e,
chances are in JavaScript we're talking about event.
And we could console.log.
Button is rendered useless.
And let's refresh the page and submit this button and it
just says button is rendered uses the form is not submitting. I can do this.
And when I submit the form, if it actually submits,
this should be refreshed or it should be wiped clean.
There should be nothing in here. But it's preventing the form from submitting.
And why is it doing that?
And it's because we said,
take that button, whenever you click it, take that event,
that click event, and prevent it from doing its normal thing,
prevented from being a normal function in button.
So in this lesson, what I would like you to do is write an HTML form when you submit it,
prevented from doing anything.
And then comment that out like I did.
And when you have a submit button and remember that type of button cannot be button.
It can not be reset,
it has to be Submit.
So when you submit this form by clicking the button,
prevented from doing its normal thing as well.
There's two ways to prevent the form from being submitted.
And also remember, when you submit your form here,
when you prevent it from being submitted.
Typically what we do is we grab this information from
like an input text field anywhere else.
And we work with that information first and then maybe
we actually submit it using JavaScript or maybe we don't.
Maybe we send that information off to and ajax or an API endpoint.
Regardless. If this is good to know that this is good to tuck in your back pocket.
And event dot prevent default is very, very popular.
You're going to see this everywhere and this is
actually honestly, this is just JavaScript.
This isn't even jQuery.
So go ahead and give that a shot when you are done,
let's talk about hiding elements.