Javascript Tutorial for begineers | Part 39 | Accessing Form Elements [w/ subs]



00:00:00 – you
00:00:04 – what's up guys is Bucky here and welcome
00:00:08 – to your 39th JavaScript sorrow and in
00:00:11 – the last tutorial I tell you guys how to
00:00:13 – access and differentiate between
00:00:14 – different forms on your web page but now
00:00:17 – in this tutorial since we already have
00:00:20 – access to each forum I'm going to show
00:00:22 – you how to access each element in those
00:00:24 – forms so let's go ahead and create a
00:00:26 – form but I didn't want to keep the old
00:00:28 – one from last time because I want to
00:00:30 – make it a little bit different so as we
00:00:32 – know from our XHTML tutorials hopefully
00:00:35 – you I shows each form can have a
00:00:37 – property called a name and I'm just
00:00:39 – going to set this form equal to bucky's
00:00:41 – form simple enough so now if we go ahead
00:00:46 – and end it we can begin adding our
00:00:48 – elements so let's just like before add a
00:00:51 – username a password and snip on so the
00:00:57 – user name all we need to do is just like
00:00:59 – last time we'll just make an input box
00:01:01 – so input type equals text and let's go
00:01:07 – ahead and add a name to this do so name
00:01:09 – equals user's name simple enough so now
00:01:15 – if you just go ahead and and we won't
00:01:16 – copy it so for the password box it would
00:01:19 – be input type equals might as well make
00:01:23 – a password I think I made it texts in
00:01:25 – the last tutorial but that's definitely
00:01:26 – not secure so the name equals um
00:01:30 – password so well no so let me just go
00:01:34 – ahead and test this right now
00:01:36 – hello didn't want to look i got yahoo
00:01:40 – son of a beach launching chrome there we
00:01:43 – go so now we've got a password box in
00:01:46 – the text box working perfectly so i
00:01:48 – might as well add a submit button I mean
00:01:50 – why not um input type equals submit
00:01:56 – value equals submit now let's go ahead
00:02:01 – and save it and refresh again and check
00:02:04 – it out we got a perfectly working form a
00:02:06 – user name secret password and the submit
00:02:08 – button that does nothing at all pretty
00:02:10 – cool huh so like I said in order to
00:02:13 – access our form itself let's say we want
00:02:16 – to set equal to variable would first
00:02:18 – rate document since the forms array is
00:02:21 – an object of the document so then we
00:02:25 – will write forms and since this is our
00:02:28 – first form on our webpage we would go
00:02:30 – ahead and identify it by 0 since
00:02:32 – everything in arrays start at zero so
00:02:36 – after that I told you guys that there is
00:02:38 – a way to access each element so for
00:02:41 – example if we want to access the first
00:02:43 – element right here the forms array has a
00:02:46 – property already built in and that's the
00:02:49 – elements array so elements 0 will give
00:02:55 – you access to the first element in your
00:02:57 – form elements 1 will give you access to
00:03:00 – this and elements to would give you
00:03:02 – access to this you're saying all right
00:03:04 – why do I even want access to it and
00:03:08 – what's the use of it what am I going to
00:03:10 – do with it well typically people want
00:03:12 – access to let's say they wanted to
00:03:14 – verify that the user name only consisted
00:03:17 – of letters and numbers so when a user
00:03:20 – logs in your web page you don't want
00:03:21 – them to enter lucky dollar sign
00:03:23 – percentage sign at sign semicolon
00:03:26 – semicolon you want like Bucky 65 Bucky
00:03:29 – 1492 so this is why you would want
00:03:32 – access to each element so for now since
00:03:35 – we're not validating any data all we're
00:03:37 – going to do with this element is get a
00:03:40 – property of it and that's the name and
00:03:42 – again your form has a name called
00:03:44 – Bucky's form
00:03:46 – each element has a name this one is
00:03:48 – username this one is password this one
00:03:50 – we didn't give a name so now the name of
00:03:53 – user name since this is the first
00:03:55 – element in form 0 is going to be equal
00:03:58 – to the value username x equals username
00:04:02 – so now we just go ahead and document
00:04:04 – write this and if we print out X on the
00:04:07 – screen and save it and launching chrome
00:04:10 – check it out it says user name right
00:04:13 – there so one more quick example if we go
00:04:16 – ahead and access the second one by
00:04:18 – typing form 0 since it's the first form
00:04:21 – second element and go ahead and save
00:04:23 – this and then we go ahead and launch
00:04:25 – this in chrome it says password right
00:04:27 – there pretty cool huh so I'm saying all
00:04:31 – right simple enough whenever I want to
00:04:33 – access a form i just write form whatever
00:04:36 – number it is and then whenever i want to
00:04:38 – access an element i right element
00:04:40 – whatever number it is in the right but
00:04:42 – all these arrays are getting pretty
00:04:44 – confusing Bucky is there something
00:04:46 – easier that I can do yes there is
00:04:49 – instead of worrying about arrays you
00:04:52 – have a different option of accessing
00:04:54 – your forms and also your elements
00:04:56 – instead of using the forms array you can
00:04:59 – just go ahead and use the name of the
00:05:02 – form itself and this I think I kennel
00:05:06 – cough so anyways let's just go ahead and
00:05:09 – copy the name of a form which is Bucky's
00:05:11 – form instead of form 0 we're just going
00:05:14 – to go ahead and put Bucky's form and it
00:05:16 – just like that so just to verify that
00:05:18 – it's working so far let's go ahead and
00:05:20 – run launching chrome and check it out we
00:05:23 – still get password pretty cool so now we
00:05:27 – know that we can use the form name
00:05:28 – instead of using that dumb forms right a
00:05:31 – whole lot more simple or a whole lot
00:05:33 – simpler what is it i don't know i'll let
00:05:36 – you decide so now what we can do is we
00:05:40 – can treat elements the same rate the
00:05:42 – same array oh i crack myself up the same
00:05:46 – way if an element has a name we no
00:05:49 – longer have to use that dumb old
00:05:50 – elements array we can just go ahead and
00:05:52 – use the name of it which is use
00:05:55 – his name in this case so let's go ahead
00:05:56 – and paste this in and of course if we're
00:06:00 – writing code where we wanted to print
00:06:02 – out the name of an element I mean the
00:06:04 – names right here so it's going to print
00:06:06 – out user name kind of redundant but
00:06:08 – anyways this is just an example so let's
00:06:10 – go ahead and launch this in chrome and
00:06:12 – we see in fact we can access that
00:06:14 – element using the name instead of the
00:06:17 – array so anyways probably printing out
00:06:19 – the name wasn't the best example but hey
00:06:21 – I did it anyway so what I want to stress
00:06:23 – you guys in this story is in order to
00:06:26 – access each individual element in the
00:06:28 – forms array we can either use the
00:06:30 – element array simple enough element and
00:06:33 – then the name of whatever element you
00:06:36 – want to use or excuse me the number of
00:06:38 – whatever element you want to use or if
00:06:40 – it has a name we can use that as well
00:06:43 – for example we use bucky's form right
00:06:46 – there in user name right there and it
00:06:48 – worked fine so with those two things we
00:06:51 – now have knowledge of how to access any
00:06:53 – item in our forms any item in any form
00:06:57 – on our web page pretty cool huh so now
00:07:00 – that we have access to them we can be
00:07:02 – then begin doing things like validating
00:07:04 – the data make sure they're filling
00:07:06 – checking whether or not a checkbox is
00:07:08 – checked checking whether a radio box is
00:07:10 – checked you know simple stuff like that
00:07:12 – so that's what I'm probably going to be
00:07:14 – covering in the next tutorial but for
00:07:15 – now that's all I have for you guys so
00:07:16 – thank you guys for watching don't forget
00:07:17 – subscribe and I'll see you guys later
00:07:19 – [Music]
00:07:28 – you
00:07:28 – [Music]
00:07:30 – you
00:07:39 – you


Video Url:
http://youtu.be/pfAXp_Z-Gws

Comments

comments