Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Just about all the text fields in an HTML form are input fields. The exceptions are the text area field, which is really just like a text field, and also the select field. The select field is quite another beast, so I wanted to cover how to handle onchange events on select fields. Select fields have a special and very useful property called the selectedIndex property, which shows you the option that a user has selected from its list. So, let's take a look at this form, which we're going to be working on in this movie.
This form just has a single field, and it's a pop up field with a list of some websites. If you take a look at the code, you'll see that the value field for each of those is an actual site. So what I'm going to do is, after the form field, I'm going to add a script tag. And on that script tag, I'm going to target the form. And our field is called reference, so I'll target that. And I'll add an onchange event handler. That's going to be a function literal, means just a function with no name. And inside that, I'm going to create a variable, called id, that is going to hold the value of the selected index field for that form. So I'll target the document, form, and then the reference, element. And I want to target the selectedIndex property of that field. So I'll store the selection from the user into this variable called id. Now once I have that, I can get the value of the selected element, and put that in another variable.
So, I'll create another variable called url, and that's going to be pretty much the same thing, document, target the form, then the reference variable. And I'll pass it along the id, that's the variable we just created. And I need the value of that id. So, my URL is going to be the value of the item that the user has selected. Now after that, I'll set the location of the window. So I'll do Window > Location. And set the href, or the URL of the current window, to that URL that we received from the pop up list. So, let me go ahead and save this, and I'll go back into my form, and I'll refresh.
You'll see that whenever I chose one of these elements, it's actually going to go to that website. So, although the onchange event still triggers in the same way for select and input fields, getting information about a select field is a bit different. The selectedIndex property helps you access the option that has been chosen by the user.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 105302 Viewers
56 Video lessons · 117047 Viewers
71 Video lessons · 86250 Viewers
131 Video lessons · 41229 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.