How to use getElementById to get the elements in a form

There are many ways of accessing form elements, of which the easiest is by using the cross-browser W3C DOM document.getElementById() method. Before we learn more about this method, it would be useful to know something about the Document Object Model (DOM), the concept of HTML nodes or elements, and the concept of containers. Each time you load an HTML page, the web browser generates an internal representation of the page in the form of an inverted tree structure. Let us look at a simple form. We will use this form later to demonstrate the use of the getElementById method.

Sample code Download the sample code here: getelementbyid-form-sample.zip

<form name ="subscribe" id="subscribe_frm" action="#">

Your Name: <input type="text" name="name" id="txt_name" />

Your Email: <input type="text" name="email" id="txt_email" />

<input type="button" name="submit" value="Submit" onclick="processFormData();" />

</form>

There are elements such as <input/> and containers like <form> </form> Each element can have attributes associated with it, such as:

<input type="text" name="name" id="txt_name">

Here, the <input/> element has three attributes: type, name and id. The id attribute uniquely identifies this particular element.

Accessing Form Elements using getElementById

In order to access the form element, we can use the method getElementById() like this:

var name_element = document.getElementById('txt_name');

The getElementById() call returns the input element object with ID ’txt_name’ . Once we have the object, we can get the properties and call the methods of the object. For example, to get the value of the input element, get the value attribute.

var name = name_element.value;

Similarly, it is possible to access the <form> element:

var frm_element = document.getElementById ('subscribe_frm');

Example: access the form and input elements

See the demo. In this demo, we toggle the visibility of the form. This is done by accessing the form element <form> which we have seen above and setting its display property as shown in the code below:

var frm_element = document.getElementById('subscribe_frm');

var vis = frm_element.style;

if (vis.display == '' || vis.display == 'none') {
   vis.display = 'block';
} else {
   vis.display = 'none';
}

Example: Input validation

The code below makes sure that the field is not empty. First, we trim out any leading and trailing blank space.


function trim (str)
{
     return str.replace (/^\s+|\s+$/g, '');
}

The code below validates the txt_name field.

var name_element = document.getElementById ('txt_name');

if (trim(name_element.value) == '')
{
   alert ('Please enter your name');
}

Checking for getElementById support

All modern browsers support getElementById() method. However if you are to support very old browsers, use the following function:

function getElement(id) {
   if (document.getElementById) {
      return document.getElementById(id);
   } else if (document.all) {
      return window.document.all[id];
   } else if (document.layers) {
      return window.document.layers[id];
   }
}

Other Cross-browser ways of accessing form element objects

There are two other cross-browser ways of accessing form elements: document.getElementsByTagName and document.getElementsByName.

Using the document.getElementsByTagName Method

This method takes in as argument the name of a tag (element) and returns an array of all matching tags (elements) found in the document.

In our form example, if we had to get a reference to all the elements, we could use the following code:

var inputs = document.getElementsByTagName('input');

The variable inputs is a reference to an array of all <input> elements including: <input type="button">

getelementbyid example 2

What if we only wanted to access <input> elements with the type attribute as text? We could do it in the following way:

var inputs = document.getElementsByTagName("input");
var message = "The form has the following input elements with the 'type' attribute = 'text': \n\n";

for (var i = 0; i < inputs.length; i++) {

   if (inputs[i].getAttribute('type') == 'text') {
      message += inputs[i].tagName + " element with the 'name' attribute = '";
      message += inputs[i].getAttribute('name') + "'\n";
   }
}
alert(message);

This time, the elements retrieved do not include the element: <input type="button">.

getelementbyid example 3

Using the document.getElementsByName Method

This method takes in as argument the name attribute value of elements to be retrieved and returns a collection of desired matching elements.

In the code snippet below, let us say we need to get a reference to the <select> element with the name attribute mail_format.

<select name="mail_format" id="slt_mail_format"> 
<option value="TEXT">Plain Text</option> 
<option value="HTML">HTML</option> 
</select>

We could access the desired element in this way:

var mail_format_elements = document.getElementsByName('mail_format');

getelementbyid example 4.