Form Elements

All of the properties you set for form fields with HTML are programatically accessible with JavaScript, however there are just a few key elements that we need concern ourselves with. The first and best hidden is the form property. The form property of an element is not something you declare, but that the system generates for you. It is simply a pointer that points back to the form containing the element. Sometimes you need to refer to the form from within the elements object, and this is the easiest way to do so. It is just like working with windows and frames, and the ability to point to a parent in that context.

The two most important properties that you declare as attributes of the form elements are name and value. All form fields are required to have a name, and some are required to have a default value, although both can be used in any form field. The name stores the name of the form field. As noted above, you can use it instead of the position of the element in the elements[] array to reference the form field. The value property contains the value you want to pass back from that form field. This is why whenever you query the contents of a form field, you see it written as document.forms[].elements[].value.

Most form elements also have two methods you can make use of. These are focus( ) and blur( ). The focus( ) method allows you to set focus to a field. Getting focus normally means that you have clicked in it with the mouse or tabbed to it with the keyboard. This is useful to do something like return from a validation script with the cursor set in the field that needs to be corrected. blur( ) is the opposite of focus and specifies that the element loses focus.

<form name="form01" method="" action="">
<p>
Watch the cursor ...
<input type="text" name="field01" size="10" />
<input type="button" name="field02" value="Focus"
  onclick="document.form01.field01.focus();" />
<input type="button" name="field03" value="Blur"
  onclick="document.form01.field01.blur();" />
</p>
</form>

Radio Buttons

Many form elements need to have unique names. The one exception to this rule is the radio button. Values from radio buttons are stored in an array of values. The name of the array is the same as the name of the field itself, but the values for the field are stored as an array of values, one for each radio button defined for that element. The way in which you determine which option is selected is by walking the array and seeing which element has a checked attribute of true.

<form class="example" name="form02" method="" action="">
<p>
Pick an option ...
[<input type="radio" name="field01" value="item1" /> 1]
[<input type="radio" name="field01" value="item2" /> 2]
[<input type="radio" name="field01" value="item3" /> 3]
[<input type="radio" name="field01" value="item4" /> 4]
</p>
<p>
And click the button:
<input type="button" name="field02" value="Find the One"
  onclick="findtheone( );" />
<input type="button" name="field03" value="Set to One"
  onclick="document.form02.field01[0].checked='true';" />
</p>
</form>

<script type="text/javascript" language="JavaScript">
<!--
function findtheone( ) {
  var whichitem = 0;
  while (whichitem < document.form02.field01.length) {
    if (document.form02.field01[whichitem].checked) {
      window.alert('You picked item number ' + (whichitem + 1));
      }
      whichitem++;
    }
  }
// -->
</script>

You can do the same thing with Checkboxes. If you have a collection of checkboxes with the same name you can address them as an array, testing for which ones are selected by checking the checked property of each one. If each checkbox has a unique name, then you can just address the checkbox by name and do not need to use the array notation.

<form class="example" name="form03" method="" action="">
<p>
Pick an option ...
<br />
Row 1: [<input type="checkbox" name="field01" value="item1" /> 1]
<br />
Row 2:
[<input type="checkbox" name="field02" value="item1" /> 1]
[<input type="checkbox" name="field02" value="item2" /> 2]
[<input type="checkbox" name="field02" value="item3" /> 3]
</p>
<p>
And click the button:
<input type="button" name="field03" value="Find the One"
  onclick="findtheone( );" />
<input type="button" name="field04" value="Set to One"
  onclick="document.form03.field01.checked='true';" />
</p>
</form>

<script type="text/javascript" language="JavaScript">
<!--
function findtheone( ) {
  var outvar = '';
  var whichitem = 0;
  if (document.form03.field01.checked) {
    outvar = 'You selected the item in the first row. \n';
    }
  while (whichitem < document.form03.field02.length) {
    if (document.form03.field02[whichitem].checked) {
    outvar = outvar + 'You selected item number ' +
        (whichitem + 1) + ' in the second row. \n';
      }
      whichitem++;
    }
      window.alert(outvar);
  }
// -->
</script>

Selectable Elements

Drop down menus and scrollable menus are made of selectable elements. Each selection set is made up of a containing <select> tag and a collection of <option> tags. These are a little tricky to work with in JavaScript.

The <select> element does not have any properties we need to worry about unless we are using JavaScript to dynamically generate forms. In that case the properties have the same names as the HTML attributes they represent, such as size and multiple. The only two important properties of the <select> element are name and the options array. All the other properties of note are properties of the <option> elements.

The easiest way to determine which option has been selected in a selectable list is by using the selectedIndex property of the selection list. It is a property of the options[] array that stores the index position of the selected element. It is used as follows: document.fname.selname.options[document.fname.selname.selectedIndex]

If you have multiple set to true than instead of the selectedIndex value, you need to walk the array and test each option for the value of its selected property. If it is true, then the option is selected.

Options have some properties worthy of note.

selected: Is set to true if the option is selected. Otherwise it is set to false.
value: The value sent back to the server if this option is selected.
text: The text displayed for that option.

<form class="example" name="form04" method="" action="">
<p>
Pick an option ...
<select name="field01" size="6">
  <option value="a">Door number 1</option>
  <option value="b">Door number 2</option>
  <option value="c">Door number 3</option>
  <option value="d">This box</option>
</select>
Pick some options ...
<select multiple="multiple" name="field02" size="6">
  <option value="a">Door number 1</option>
  <option value="b">Door number 2</option>
  <option value="c">Door number 3</option>
  <option value="d">This box</option>
</select>
</p>
<p>
And click the button:
<br />
<input type="button" name="field03" value="Set to One"
  onclick="document.form04.field01.options[0].selected='true';" />
<input type="button" name="field04" value="Set to New"
  onclick="document.form04.field01.options[3].text='A new car';" />
<input type="button" name="field05" value="Set to Old"
  onclick="document.form04.field01.options[3].text='This box';" />
<input type="button" name="field06" value="Find the One"
  onclick="findtheone( );" />
<input type="button" name="field07" value="Find the Many"
  onclick="findthemany( );" />
<input type="button" name="field08" value="Door number 4"
  onclick="document.form04.field01.options[document.form04.field01.length]=
    new Option('Door Number 4', 'e');" />
</p>
</form>

<script type="text/javascript" language="JavaScript">
<!--
function findtheone( ) {
  if (document.form04.field01.options[document.form04.field01.selectedIndex]) {
    window.alert('You selected item ' +
      (document.form04.field01.selectedIndex + 1));
    }
else {
    window.alert('You did not select and item');
    }
  }

function findthemany( ) {
  var outvar = '';
  var whichitem = 0;
  while (whichitem < document.form04.field02.length) {
    if (document.form04.field02.options[whichitem].selected) {
      outvar = outvar + ('You selected item ' + (whichitem + 1) + ': ' +
        document.form04.field02.options[whichitem].text) + '\n';
      }
      whichitem++;
    }
  if (outvar == '') { outvar = 'You did not select an item.'; }
  window.alert(outvar);
  }
// -->
</script>

These pages can be found at: [http://academ.hvcc.edu/~kantopet/]
Copyright 2003 -- Peter L. Kantor[kantopet@hvcc.edu]
Last Updated January 2003