How to use getElementById to get the elements in a form

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

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.

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

In the above HTML form, each tag (such as <html>, <input> and <form>) is known as an element, and a matching pair of opening and closing tags is known as a container (ex: <form> and </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. What we are interested in, from the perspective of being able to access this element from Javascript is the id attribute.

Accessing Form Elements using getElementById

In order to access the <input> form element, we can use the method of the document object getElementById() like this:

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

The variable object name_element holds a reference to the input field in the above form called name with the id attribute txt_name. Please note that this method can only be used to access elements with a unique id attribute. Through this object we can access all of the properties of the <input> element and even change the values of those properties.

To access the value of the above input field entered by a user, we use the following syntax:

var name = name_element.value;

In a similar way, it is possible to access the <form> element:

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

Let us look at an example implementation of this method for accessing a form and all the user input elements of the form.

As you can see from the demo, it is possible to toggle the visibility of the form itself. This is done by accessing the form element <form> which we have seen above and setting its CSS display property in this way:

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';
}

If we put this code in a function each time the function is called, it would toggle the visibility of the form.

Each of the three user input elements: name, email and mail_format can also be accessed by the getElementById method in the same way. Simple input validation has been provided.

As an example, if you wanted to ensure that the name <input> field was not empty, we could use a JavaScript regular expression for checking the user input: /^\s+|\s+$/g which would check for all leading and trailing white spaces including tabs.

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

We could then use this function:

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

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

getelementbyid example 1

Checking for getElementById support

We can check for the availability of the document.getElementById method using a conditional if statement:

if (document.getElementById) {
// use this method
}

Please note that we only check for the method. We do not pass the id of the actual element that we need to access. For instance, the code below would be invalid:

if (document.getElementById('txt_name') {
// use this method
}

The programs that we have seen so far work flawlessly in modern browsers that support the W3C DOM implementation. All recent versions of Mozilla Firefox, Opera, Internet Explorer and Netscape fall under this category. But if we had to support older browsers like Netscape 4 and Internet Explorer 4, we would have to use a different method to access form elements.

For Netscape 4, we would have to check for the availability of the document.layers property, and for Internet Explorer 4, we would have to check for document.all

We could write a function that manages all this for us:

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 elements

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 <input> 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');

The getElementByTagNames method is handy for accessing specific form elements in forms where the name attribute is unique and the id attribute is not present (and so getElementById cannot be used), although it can also be used when the id attribute is present as an alternative to the getElementById method.

getelementbyid example 4.

  • Digg
  • del.icio.us
  • Netscape
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb

Related:

  • Digg
  • del.icio.us
  • Netscape
  • Reddit
  • StumbleUpon
  • Technorati
  • YahooMyWeb

How to make a form without coding? Click here for a demo.

Follow me on twitter

HTML Forms
HTML Form Tutorial
The Form Tag
The Form Submit Button
Form design software
How to make a web form
Make web forms quickly, without coding

Javascript Form Handling
  Basics
Using getElementById to get the elements in a form
Set value of form element using JavaScript
Get value of form element using JavaScript
Handling multiple forms using JavaScript
JavaScript reset/clear a form
  Advanced
JavaScript Form Validation
Submitting a form using JavaScript
Can JavaScript Email a Form?
Switching the form action field dynamically
JavaScript Button

JavaScript Popup Windows
The window.open method
The window.close method
More ...

 
.   Copyright © 2003-2009 JavaScript-coder.com. All rights reserved.