536 - Document & Form Objects

Document Object

What is it?

Document Methods:

close()
open()
write()
writeln()

Document Properties

bgColor, fgColor
cookie
domain
anchors[]
applets[]
forms[]
images[]
links[]
lastModified
referrer
title
URL

Below is an example of document.lastModified, document.domain, and document.bgColor...

Build Image Rollover thingie...

Forms

Form Review:

Beginning and ending tags <form name="sample"> </form>
Input
Select
Textarea
Controls (buttons)

Input Types:

Text Boxes
Radio Buttons
Check Boxes
Submit Buttons
Reset Buttons
(Generic) Buttons
Hidden Fields

Text Boxes

What is a text box and when is it used?

Last Name: <input type="text" size="40" name="lastname" value="Smith">

Last Name:

Radio Buttons

What is a radio button and when is it used?

<input type="radio" name = "gender"><b>Female</b>
<input type="radio" name = "gender" checked><b>Male</b>
<input type="radio" name = "gender"><b>Unknown</b>

Female Male Unknown

Checkboxes

What is a checkbox and when is it used?

<input type="checkbox" name="beer"><b>Beer</b>
<input type="checkbox" name="wine"><b>Wine</b>
<input type="checkbox" name="goodstuff"><b>Scotch</b>

Beer Wine Scotch

Submit Buttons

Send the form's data to the server application specified in the form tag

Reset Buttons

Reset the form to it's default state (erase user entries)

(Generic) Buttons

Select

What is a select type and when is it used?

<select size="4" name = "veggies">
<option>Carrots</option>
<option selected>Brussel Sprouts</option>
<option>Shitake Mushrooms</option>
<option>Tomatos</option>
<option>Herbs</option>
<option>Peppers</option>
<option>Onions</option>
</select>

Select

Select can also replace radio buttons:

<select size="1" name = "veggies">
<option>Carrots</option>
<option selected>Brussel Sprouts</option>
<option>Shitake Mushrooms</option>
<option>Shitake Mushrooms</option>
<option>Tomatos</option>
<option>Herbs</option>
<option>Peppers</option>
<option>Onions</option>
</select>

Textareas

What is a textarea and when is it used?

<textarea rows="10" cols="40" name="novella"> Default text here </textarea>

Forms and Javascript

Getting information from forms and their elements with scriptable commands

Forms in Action

<form name="quiz1">
What is the Unix command to delete a file:
   <input type="text" name="deletequestion"><br>
What is the Unix command to create a new directory:
   <select name = "dirquestion">
      <option>mknew</option>
      <option>mkdir</option>
      <option>rmdir</option>
   </select>
Do you believe you're right?
<input type="checkbox" name="yes">Yes
<input type="checkbox" name="no">No
Are you:
<input type="radio" name="sex">Male
<input type="radio" name="sex">Female
</form>

The above form in html

Form Values in JavaScript


//read the text box (all the same!)
var the_input = document.quiz1.deletequestion.value;
var the_input = document.forms[0].elements[0].value;
var the_input = document.quiz1.elements[0].value;
var the_input = document.forms[0].deletequestion.value;

//set the text box (again, all the same!)
document.quiz1.deletequestion.value="chmod";
document.forms[0].elements[0].value="chmod";
document.quiz1.elements[0].value="chmod";
document.forms[0].deletequestion.value="chmod";

//read a checkbox
//for the 'Yes'
if (document.forms[0].yes.checked==true) { //OR
if (document.forms[0].elements[2].checked==true) {
//for the 'No'
if (document.forms[0].no.checked==true) {  //OR
if (document.forms[0].elements[3].checked==true) {

//read a radio button
if (document.quiz1.sex[0].checked==true) {


//read a select option
//this is checking if 'mkdir' was selected!
if (document.forms[0].elements[1].options[1].selected==true) {

Naming Conventions:

For this html code:

<form name="sample" id="sampleId">
     <h2>Test Form</h2>
     Name:<input type="text" name="name" id="nameId" size="30" value="Type your name here">
</form>

Looks like this:

Test Form
Name:

The code to acces what is in the text field: (all the following work!)

document.forms[0].elements[0].value;
document.forms[0].name.value;
document.forms[0].elements['nameId'].value;
document.forms[0].elements['name'].value;

document.forms['sample'].name.value;
document.forms['sample'].nameId.value;
document.forms['sample'].elements['nameId'].value;
document.forms['sample'].elements['name'].value;

document.sample.elements[0].value;
document.sample.name.value;
document.sample.elements['nameId'].value;
document.sample.elements['name'].value;

/* id vs. name (does work, not sure about future...)
document.forms['sampleId'].name.value;
document.forms['sampleId'].nameId.value;
document.forms['sampleId'].elements['nameId'].value;
document.forms['sampleId'].elements['name'].value;*/

/* IE only!
document.sampleId.name.value;
document.sampleId.nameId.value;
document.sampleId.elements['nameId'].value;
document.sampleId.elements['name'].value;*/

Validation!

Document Object

Build Image Rollover thingie...

Forms

Form Review:

Input Types:

Text Boxes

Radio Buttons

Checkboxes

Submit Buttons

Reset Buttons

(Generic) Buttons

Select

Select

Textareas

Forms and Javascript

Forms in Action

Form Values in JavaScript

Naming Conventions:

Build Form Validation thingie...