Accessing form elements
Video: Accessing form elementsWhen 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.
Viewers: in countries Watching now:
- Creating variables, functions, and loops
- Writing conditional code
- Sending messages to the console
- Working with different variable types and objects
- Creating and changing DOM objects
- Event handling
- Working with timers
- Building smarter forms
- Using regular expressions
Accessing form elements
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.