1. JavaScript and Forms
Kevin Harville

2. 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.

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

4. 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

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

6. 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!

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

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

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

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

11. 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

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

13. 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>

14. Check box method
click() Changes the checkbox.

15. 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.

16. 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

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

18. 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.

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

20. 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

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

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

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