Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Once you know how to gain access to a form field like an input field, checkbox, or a drop-down, we can access any of the attributes within that field via the elements array. In the last movie, we learned that we can get to a form field in one of two ways. Using the ID of the field and get elements by ID, or using the name of the field and the document forms array. Once we're there, we can retrieve any sets of attributes using dot notation. Now it's important to realize that different field types have different attributes. We need to know how to get to the different things in our forms.
I'm going to be working on this form, which is a form that I created in my course CSS styling forms. I show you how to put it together on chapter six. So I'm going to rightclick in the background and select Inspect Element. I'm using the Google Chrome browser, and I'm going to hit the Console tab on the right hand side. And once here, I'm going to try to acces the my name field, which is the place where the user types in their name. By typing in document, get elements, my ID and then typing in the ID of that field, which is my name.
I hit Return, I can get to that specific filed. We can also get to the that field by typing Document.form, which is the name of the form, and the name of the field, which is my name. If we hit return, we get to the same field. So notice that this field has a number of attributes. To get to any of those attributes, you can simply types the names of the attributes using dot notation. So if we type Document dot the form dot my name we can get to the type field by just typing in type.
We hit Return, it gives us the value of type. And we can access any of the other fields like that. So if you say name, it'll give us my name, etc, etc. Now you can also modify any of them, by setting them as well. So for example, I can actually change the form type, let's go to the type right here and set it to be a radio button. I need to make sure that I put this in quotes. So, now the name field happens to be a radio button. Let's go ahead and set it back. A common thing to do when validating and processing forms is to set the value of a field.
So, if I want to set a value of a field, all I need to do is type in value and type in whatever I want in there. I'll put my name. Now you can see that the name field gets the value that I just entered. Let's try getting and setting some of the other attributes in our form. This will teach you how to access different things. So what do we do if we want to access a checkbox? So right now this checkbox called Subscribe Item is checked, so we can uncheck it by typing in Document the form, and then it's called scribe item.
And then use the checked attribute, and set it to false. Now, only quotes on this one, and now you see that that item has become unchecked. What about if we wanted to modify a drop-down menu? That's a little bit trickier. To get to the menu itself, we can use document.theform. And that field is called Reference. But if we want to access each of the elements in there, I need to use an array notation. Notice if I open this triangle, I can see that there are a few elements in there. So if I want to get the third element, I can use Array Notation Number Two.
And then add a selected attribute to that field and set it to true. Now, that Option is the selected Option. So, most validation deals with check in and setting the values of existing fields. It's a good idea to pull up this form and get comfortable with accessing and modifying different form fields.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100031 Viewers
56 Video lessons · 113097 Viewers
71 Video lessons · 81944 Viewers
131 Video lessons · 39317 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.