so today's video is talking about a
fairly common task when you have a
webpage that has user input person you
want them to fill in a label and a
number and you want to take that
information you want to put it inside of
a JavaScript object maybe you're gonna
take that object and send it off to the
server maybe you're gonna put it into
local storage
maybe you just need to have it in an
object that you can pass it someplace
else to be displayed in any case you
need to take what the user types and put
that inside of a JavaScript object so
let's look at how we do this here's my
code for the page we've got a form
element inside of which I've got two
inputs one that's text one that's number
one called title one called yr for a
year and then I've got a button when the
person clicks this button I'm gonna take
the values out of these things and put
them into a JavaScript object all right
in the script down at the bottom here
here's my Dom content loaded always
start with this make sure that the page
is loaded before we try to run things on
the page we've got the button in the
form when that gets clicked we're gonna
call the function add movie so here is
our function add movie right here and
I've got about half of it written or me
a little bit more than half first thing
I'm doing inside of here this first line
evie prevent default now Evie is being
passed in whenever you have a click
event so some sort of a mouse event a
load event an event you call a function
based on that event so this event
triggers the function running JavaScript
will pass to your function that event so
Evie this is the event and we're saying
prevent default okay what does that mean
you can see in my comment here to stop
the forms from submitting if we look at
the form right here my button is inside
of this form element because it is
inside of a form when you click on it
the default behavior of any browser is
if you click on a button and it's the
only button inside of a form even though
it's not a type submit input element
it's a button you've clicked it it's
inside of a form
the browser says hey you want to submit
the form I'm gonna do that I don't care
what you say I'm gonna try to send this
data somewhere and reload the page I
don't want the page to reload because I
will lose all my data so prevent default
he's telling the browser don't do what
you would normally do okay great
my form doesn't submit now I'm gonna
create an object it's just local inside
my function called movie inside of it
I'm gonna create three properties ID
title and year the ID just to get
something simple and unique I'm grabbing
the current timestamp so date dot now
this method will give me the current
timestamp I put that into the ID my
title is going to be get element by ID
title that is up here it's the input
text type with the ID title I want its
value attribute just like here if I put
value equals jaws there's a movie it's
inside of here now this will be the
default when the page loads and every
time you reset the form this is what
it's going to go back to I don't want
that there so I can either put value
with nothing inside of it
or I can just omit the value altogether
and it'll do the same thing but down
here this gives me what the user has
written same thing for the year I'm
getting the value of what they've
written and these will be the values for
these properties inside of my movie
object simple enough once I've done that
I take my movie object and I'm adding it
to an array that I created called movies
and up here so it's outside of my
function I created this thing called
movies it's an array and every time I
add something I'm adding it to this
array so I'm gonna have a whole bunch of
objects that look something like this
being added to this array every time I
click the Add button I'm sticking it in
there now I'm not doing any validation I
should do an if statement at least to
make sure that they have written
something in the form but that aside I'm
putting all these new movie
objects into the movies array then I'm
calling reset on my form now this is an
old way of targeting a form there is a
forms object inside the document object
that's a list of all the forms on your
page you could also do document dot
query selector form and it would get you
the same result
so we could say document query selector
form dot reset that would do the exact
same thing so I'll leave them both in
there as comments okay now when I add it
I'm writing out the object in my console
and I'm also going to write out I have a
pre tag so pre formatted text I'm gonna
set its text content to whatever the new
movie is okay so let's run this once on
here but the Hobbit which I can't
remember exactly we're gonna guess on
2013 there we are
so here is my array with an object
inside of it there's the values and
let's add Deadpool now again I'm gonna
guess on 2015 there we are and if I open
up this there's my movies object and
inside of it the two movies okay great
so that's working we are taking user
input and we're putting it inside of an
object we're putting that object inside
of an array now we actually have
something useful and if we wanted to
save it to local storage or send it
somewhere we could so just as a quick
example I will take it and save it to
local storage so local storage set item
my movie list and everything that you
put into local storage has to be a
string so we have to call json stringify
on whatever it is that we're putting
inside there this is going to be the
value and we're gonna take the movies
array not the movie object we just
created but the movies array and we're
gonna take that and we're going to put
add into local storage here we go
restart this let's quickly go through
this 2013 Deadpool 2015 and there we go
we've added it now let's go and take a
look at our local storage in the browser
inside of there there we have it so my
movie list has now saved with these
objects inside of it great and that's it
that's all there is to taking a user
input any amount of user input and
saving it into an object you can do
whatever you want with it saving a look
saving it in local storage is just one
of the options so I hope you found that
useful if you have any questions feel
free to leave them in the comments down
below in the description I will leave a
link to the code gist for this code so
you've got it so you can experiment with
it
and as always thanks for watching
you
you
![Businesses that Never Fail? 6 Businesses with Amazingly Low Failure Rates [Backed by Data]](https://i.ytimg.com/vi/zlljnJSTuZA/mqdefault.jpg)
