Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When it comes to working with forms, we care about several things: first, the values of the individual form elements, and then the events caused by those form elements when you change them or when you move in and out of them, and of course the event of the entire form itself, in particular submitting the form. Now, if you've given your form and the fields inside it their own IDs, then you can of course use document.getElementByID to retrieve either the form or any field in the form.
And if the HTML for your form has either an ID or a name property-- a name property is quite common with forms-- you can use the following format too: document.forms.name of the form. In this case, it was frmContact. And if you use the name property in your HTML for your individual form elements, you can use that directly too, document.forms.name of the form .name of the element. But I'm still a fan of the good old document.getElementById.
So let's talk about the individual form elements first. Probably the most common one is the text field, and as we've seen in the Events chapter, text fields have a value property. You can either get it or set it, and that's the same for a larger text area element if you're using those. Now, we've seen the onfocus and onblur events, that an element triggers onfocus when you go into it, onblur when you leave it. Now, onblur is always called when you leave the element, even if you didn't change anything, so there is also an onchange event if that's more to your liking.
But the text fields also generate events for each keypress, in fact, three events: onkeypress--which is the entire press a key, then release it--but there are also events for onkeydown and onkeyup, if you need to get that granular. Now, when it comes to check boxes and radio buttons, rather than the value property of the text field, which wouldn't really make sense here, what we care about is the checked property. That's the main, most important property of the check box element, and that's either going to be true or false.
Check boxes and radio buttons also generate an onclick event when they're clicked on and an onchange event. Most of the time you can use either or. And what about when you have to say a select field that contains many options, either showing as a dropdown list or as a list box itself that you can click in? Well, this can depend. See, in HTML you can have a select that only allows one selection or a select that allows multiple, and you can actually read this from the type property of that element, which will either be select-one or select-multiple.
Now, for a single select, when you select an option of that dropdown list, the onchange event is triggered, and you can find out which option is selected by reading the.selectedIndex property of that element. Having said that, but if you have multiple, that's not enough. What you then have to drill down to is the options array of that select field and actually go through all its options one by one and figure out if they have a selected Boolean property for each individual one.
That sounds tedious, but it can really be done in only a few lines of code. But what about the form itself? Sounds like it will be more complex, but really it isn't. There is one main event of the form, which is the onsubmit event. This is called when the user clicks-- not surprisingly--the Submit button, whatever has been defined on the form as the Submit button. Now, by subscribing to this onsubmit event, we can interrupt it before it actually gets sent to the server. You can check the boundaries of the fields and even prevent the form from submitting by returning false from the event handler.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 99900 Viewers
56 Video lessons · 113008 Viewers
71 Video lessons · 81839 Viewers
131 Video lessons · 39278 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.