All language subtitles for 013 Handling Form Submission_en

Instructor: Now we spent a lot of time

on this state here

and it showed a lot of alternatives

but up to this point of course

we're not doing too much

with that state.

That's what I wanna change now, though.

Now I wanna make sure that

this form can be submitted

when this button is pressed

when this button is pressed

and that then

we basically gather

these different state slices here

and combine them into one object

which for the moment

is then just locked to the console

but which we can use

for different things later

and therefore we wanna listen

to the form being submitted.

Now we could add a click listener here

to this add expense button

but this would not be

the best way of listening here

the best way of listening here

because indeed there is

a default behavior

built into the browser

and built into forums on web pages.

and built into forums on web pages.

If a button,

especially with type submit

is pressed inside of a form,

this overall form element

will emit an event

to which we can listen

to which we can listen

and that's the submit event.

So it's on this form

where I wanna react to on submit

and then execute some function

whenever this form is being submitted.

Now that's a function I'll add here

and I'll name it,

submit handler like this,

add that here,

we just point at submit handler

as we did it

for all the other events as well.

Now, the thing here

is that I just said

that this is a default browser behavior

and unfortunately,

a part of this default browser behavior

is that if you do click this button,

the page reloads because the browser

actually automatically sends a request

whenever a form is submitted

to the server

which is hosting this webpage.

So in this case

to this development server

to this development server

and that's not what we want here.

Instead here, we wanna handle

this form submission

with Java script and manually collect

with Java script and manually collect

and combine the data

and do something with it.

Thankfully we can disable

or prevent this default behavior

because we again

get an event object here,

automatically just as

for the change events

for the change events

and on this object,

we can call a prevent default method.

This is built into JavaScript

nothing reacts specific

this default JavaScript behavior.

We can prevent the default

of this request being sent

of this request being sent

and since that request is not sent

the page will now also not reload

because we stay

on the currently loaded page

without sending any request anywhere

and we can continue handling this

with Java script.

So they offer now

we can create our

let's say expense data object here

let's say expense data object here

and now we'll combine

all that entered data.

Of course, if you used this

one state instead of

free States approach

you already have such a combined object

but I don't have that here.

So I will now create it

once the form is submitted

and simply add a title here

and simply add a title here

and set this to the value stored

in the entered title state,

add an amount property

and set this to entered amount

and set this to entered amount

and a date property

and actually set this to a new date,

constructing a new date

with the built in date constructor

with the built in date constructor

to which then in turn

I passed the entered date

which will parse that date string

and converted into a date object.

Now these property names here,

title, amount and date are up to you

because this is your object.

because this is your object.

This year, of course

entered title, entered amount

and entered date

points at these state variables

so to say.

If you used the combined approach

you also might wanna

remap the property names

because later in the app,

I will rely on having

a title amount and date property name.

a title amount and date property name.

So make sure that

these property names exist

and hold the correct value

and then for the moment

I will just console log expense data

so that we can see that.

Now, if we reload this

and enter test and 1299

and then pick some date here

if I click add expense,

that's looking good.

We've got this object,

which has all that data stored.

which has all that data stored.

So this now all the works

and we are reacting

to the form submission.

Now, I also wanna clear the inputs

to delete the entered values

when that form is submitted.