Forms

We can process input elements. These input elements may, or may not, be within a form container element.

To process an html element, we must access the object for this element in the Document Object Model.

This sample uses getElementById() to find the input areas. There is no form element.

Like the first sample, this sample uses getElementById() to find the input areas. There is a form element. The input elements are in the form element. The form element is not actually used in this sample.

Most commonly, you will use JavaScript to validate a form onsubmit. I do not want to write the server side processing used when a form is submitted to a server program. I do not want to manage the e-mail used when a form is submitted by e-mail. So, for these examples, we will validate onreset.

Let us look at several ways we can access the objects and validate the form's onreset.

sample-3-form has a reset button. There is no JavaScript validation; you just click the button and the values are reset.

sample-4-form has a reset button. The JavaScript validation function just returns true; so the reset is always done, just as it would be if there were no validation function.

Note that the onreset attribute value contains the JavaScript code to invoke the validate function. Also note that the onreset attribute has the keyword return before the call to the validate function, so the return value from the validate function is returned when the onreset processing is complete. This return value must be true for the reset to actually happen.

The JavaScript validation function uses getElementById() to get the result element. It then checks the value of the result element. If the result element has a number, the validation function returns true; otherwise it returns false.

Note that, if the input element has a numeric value, the reset processing causes the onchange processing for the input element before doing the reset processing. This means if there is a numeric value in the input element, the form will be reset, even if the onchange processing had not been done to change the result element value.

The JavaScript validation function uses getElementById() to get the form element. Then it finds the result element as a child of the form element. It does this by looking in the property in the form element that contains the id of the input element.

The JavaScript validation function uses the forms array property of the document object to find the form. Because there is only one form, the reference to the form is in document.forms[0] Then it finds the result element as a child of the form element. It does this by looking in the property in the form element that contains the id of the input element.

The form element onreset property sends this as a parameter to the validation function. The parameter is the reference to the current object that invoked the validate() function, which is the form object. Then it finds the result element as a child of the form element. It does this by looking in the property in the form element that contains the id of the input element.

Passing this object is very useful when several XHTML elements invoke the same JavaScript function. For example, there might be a checkNumeric function that verifies that the data in an input element is numeric. This function might be invoked from several input elements, each of which needs to be numeric. The this   parameter is the DOM object corresponding to the current XHTML element.

So, we have seen a whole variety of different ways to find an element, so it can be processed. Which way should you use?

If the function always processes the same element every time it is called, then the simplest way to find the element is document.getElementById().

If the function processes a different element every time it is called, then passing the current object: this   as a parameter is good.

Reading assignments are in the text book, Java Script, A Beginner's Guide, Second Edition, by John Pollock; McGraw Hill / Osborne, ISBN 0-07-222790-7

In module 14:
Read section 14.1 It shows some older techniques for finding form and control objects. The newer, standard technique is to use document.getElementById()   Another standard technique to get a list of the forms is to use document.getElementByTagName("form")
Start reading section 14.2
The book lists several attributes of a form element. The only ones that are still standard are elements and length.
The attribute values of any Element objects can be accessed with Element.getAttribute("attribute_name")
Read carefully the section on form validation. Form validation is a very important, widely used, technique. You have the skill set to do this commercially important task.
Read the rest of section 14.2 as you need it in the following units.
You may wish to read section 14.3. It is an interesting example.

Do NOT read the lecture notes before hearing the lecture. If you do, you will find the lecture very boring. Read the lecture notes if you do not attend the lecture, or if you wish to review the material.