Text fields and select boxes - JavaScript Tutorial

- [Instructor] In this first foray into actually using JavaScript on the page, we're going to start looking at how to get data out of and back into the text fields and select boxes on this page. Two very basic types of form elements. Let's open the JavaScript console with Command + Option + I or Control + Shift + I on Windows. I'll scroll down and I'm going to start with this quantity field under basketball sneakers. I'll right click and inspect the element and I'm going to copy its Id. We're going to start by addressing these elements by Id which is the fastest and easiest way to do this if you have Ids available. So what I want to use is the function inside the global document object called getElementById and as I start typing it here in my developer tools, it's auto completed for me. I can hit the right arrow to expand that out without having to type it all. Going to need some parentheses here to pass in the perimeter, which is going to be a string with the Id. So now if I hit Return, I get back that input element. If I hover over it with my mouse, it highlights which one I've selected, which is really handy. I can make sure that I've really got the right one. Let's set a value on this, clicking the Up arrow a few times and now if I use the Up arrow here in the console, I can get that same expression back and add .value, so I'm inspecting the value property of this element. Hit Return and I get back the value. That lets me get the value, I can also set the value by assigning this a number. So let's set it to three and there we go. I set it in the console, it changes here and I get that value back as my return value. This works great when I have an Id on the element, but there are other times where you might not have that available. So let's look at some other ways to get to this form value without having the Id on the element. The document object also has a property called forms. This will give you every form that's on the page. I can see that there are three of them and in the Fire Fox developer tools, if I mouse over these, it highlights them for me so I can see that inside this forms array, the one at the index one is the form I'm interested in and so now what we can do is use document.forms[1] and if I didn't have an Id, I can use the elements property of a form and this will give me all of the form controls that are inside there. I can address these by numeric index or by their names. If I wanted to do it this way, I can pass in a string and look at this. I think this is kind of neat. It auto completes the Ids for all available elements in here so I'm looking at the text field, that's the quantity of basketballs. Hit Return and that gives me back that same field and once again, I can get its value. But of course I'm still playing with the Ids here. So as I mentioned we can use the numeric index. I can see that this is at index zero, that also works. If I were in a situation where my form elements had a name, but not an Id, I could select the form, using document.getElementById or document forms, whatever you like. Let's use get element by Id since this form does have an Id. Copy that here and then I could use the formElementName, whatever that is. If this were basketball quantity, basketball quantity or whatever that is and I can get the value from there. Now as it happens, this element doesn't have the name attribute set, so I can't use that, but it is available to you if your form elements do have that. Okay I'm going to clear this out and we'll look at the select boxes. Here's one for state. I'll inspect this and it has the Id s-state. I'll use document.getElementById again and pass in s-state and just as before, I can check its value. Currently it's empty. Now the reason that it's empty, an empty string and not the value that's displayed is because of how I've defined the options here in the select element. Each of these option elements has a displayed value which is between the option tags and then a value, which is what's going to be returned by your JavaScript functions. So when I have no selection I really don't want to have to deal with this select default and just have something empty, but when I set it to California, use the Up arrow, Return again, I get back CA. In modern browsers, this is a very easy way to get the value of a select box. You can use all the same pieces of the JavaScript DOM API that we used before to select those text fields to select your select box and then get its value using the value property. This works great in modern browsers. If, for some reason, you have to support older browsers, select boxes also have some other properties that might be interesting to you, like options. This will return an array of all the options that are available and there's also a selected index property, which will give you the index of whichever option is currently selected. Using value is much easier and generally speaking very compatible now, so I'd go with that first, but these properties are also available, if you need them. Now we haven't written any saved code yet, but we're starting to understand how to retrieve data out of several types of form fields. We'll look at some more, coming up.