JavaScript and Forms Kevin Harville

Arrays of Objects We have discussed how JavaScript will automatically create arrays of similar objects. This holds true in several instances with forms. For example, if we have two forms in a page, JavaScript creates an array.

Form Array If I have two forms, myForm1, and myForm2, I can refer to them by name or as forms[0] and forms[1].

Form Properties Several exist, such as action, target, and method, which reflect those attribute values. We also have the length property. That indicates the number of form elements. EX: myTotal = forms[2].length

Form methods The form object has two methods, submit and reset. forms[1].submit forms[0].reset

Form Events In the form tag, we can use two event handlers: onSubmit and onReset. IMPORTANT. If a function for onSubmit or onReset returns 'true' the indicated action, submit or reset, takes place. If the function returns 'false' the indicated action does NOT take place. That lets us validate forms before they are submitted to the server!

Form Properties We can refer to form elements by name or by their array index. myVar = document.order.elements[0].value;

Text Field Properties name defaultValue value Often properties are read-only. That means you can not change them.

Text Area Properties Remember, textarea is different than input type of text. Otherwise, they are handled similarly in JavaScript.

Text Input and Area Methods focus() sets focus to the field blur() removes focus select() selects the text

Text Input and Area Events onFocus when a field gains focus onBlur when a field loses focus onChange when text changes and focus is lost onSelect when text is selected

Buttons The value property of any type of button is the text that appears on the button. onClick is our event handler

Check Box Properties name value the value returned if the box is checked defaultChecked default value checked true or false <input type="checkbox" name="check1" value="Yes" checked>

Check box method click() Changes the checkbox.

Radio Buttons Radio Buttons are different from Checkboxes. Only one should be chosen in any group. Our entire GROUP has a name and is an object, rather than dealing with each button seperately. Give each button in the group the same name. Give each button a different VALUE.

Properties The radio button group has the following properties: name length Each button in the group has the following properties: value defaultChecked checked document.form1.radio1[0].checked = true; //make all others false

Radio Button Methods/Events Method: click() Event: onClick

Drop Down Lists Drop down lists may be changed on the fly by JavaScript. select tags have the multiple attribute allowing multiple items from the list to be selected. option tags in our select tags have the selected attribute to indicate the default choice.

Select Properties name length options (array) selecteIndex (first one selected in list)

Option Properties The options array has a length property. Each option has the following properties: index array index value defaultSelected selected true or false name text text displayed

Select Methods / Events Method: blur() focus() Events: onBlur onFocus onChange

IMPORTANT Use two steps to get the values from select lists: myIndex = document.myform.mySelect.selectedIndex; myValue = document.myForm.mySelect.options[myIndex].value;

Form Validation Review a couple of validation scripts. This is one of the most common uses of JavaScript.