JavaScript Forms.

• field values
• field events
• form events (submit)

Example

<form id="frmContact" name="frmContact" method="post" action="thanks.htm">
     <fieldset id="personalInfo">
        <legend><strong>Personal Information</strong></legend>
        <p>
            <label for="name">Name</label>
            <input name="name" type="text" class="text" id="name" 
                       tabindex="100">
        </p>
        <p>
            <label for="email">Email</label>
            <input name="email" type="text" class="text" id="email" 
                          tabindex="110">
        </p>
        <p>
            <label for="phone">Phone</label>
            <input name="phone" type="text" class="text" id="phone" 
                          tabindex="130">
        </p>
        <p>
            <label for="address">Address</label>
            <input name="address" type="text" class="text" id="address" 
                          tabindex="150">
        </p>
...

document.forms.frmContact
document.forms.frmContact.name

Text Fields

• main property 
• myTextField.value 
• main events 
• onfocus, onblur, onchange, onkeypress, onkeydown, onkeyup

Checkboxes and Radio Buttons

• main property
• myCheckBox.checked (true or false)
• main events
• onclick, onchange

Select Lists

• main property
• mySelect.type (select-one or select-multiple)
• mySelect.select-one
• mySelect.selectedIndex
• mySelect.select-multiple
• mySelect.options[x].selected (true or false)

• main events
• onchange

Form Events

• main event
• onsubmit (can return false to validate field values)

function prepareEventHandlers () {
    document.getelementById ("frmContact').onsubmit = function() {
    // prevent a form from submitting if no email
    if (document.getelementById ("email").value == "") {
        document.getElementById ("errorMessage").innerHTML = 
                  "Please provide an email address!";
        // to Stop the form from submitting
        return false;
    } else {
        // reset and allow the form to submit
        document.getElementById ("errorMessage").innerHTML = "";
        return true;
    }
}

window.onload = function () {
    prepare EventHandlers ();
}

Example : expand check fields when clicked "brochures"

function preparePage() {
    document.getElementById("brochures").onclick) {
        if (document.getElementById("brochures").checked) {
            document.getElementById("tourSelection").style.display = "block";
        } else {
            document.getElementById("tourSelection").style.display = "none";
        }
    }
    document.getElementById("tourSelection").style.display = "none";
}

window.onload = function() {
    preparePage();
}