You are here: Home » All Posts » Javascript Form Handling » How to use getElementById to get the elements in a form

How to use getElementById to get the elements in a form

in Javascript Form Handling

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>

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

getelementbyid example 4.

Be Sociable, Share!
  • Guest

    thanku

  • Nguyễn Hữu Thiên Sơn

    hello. I’m from Vietnam SON. I have one problem when interacting with Web applications. Can you help me?

    When interacting with the site: http://tny.cz/. I’m having problems with the submit button.

  • alex

    ive been using jQuery since last year but it is my first time in javascript. thanks a lot for these articles.

  • http://www.facebook.com/daryl.fabregas Jan Daryl F. Fabregas

    you help me a lot.. for that I will follow you. :))))

  • Alon

    Very useful thanks for the great articles !

  • http://www.scriptvenue.com Andy

    Hi

    I found this comment very useful.

  • mani

    which one i
    set in place of src=openlayers.js

  • Natan Prompra

    Script very useful. It helps me a lot understanding DOM in HTML. Thanks.

  • http://www.celestinoveiga.com Celestino Veiga

    I’m beginner on javascript language. This post is very usefull for understand the DOM and how to access each element/value of the DOM.

  • Nikhil

    how to call document.getElementsByName Method if name contains spaces like “Sign In”

  • Justin

    Well said. Clear and concise.

  • pankaj

    Hey this script was really useful. Thanks.

  • Shubham

    Please tell me how to check for the value of checkbox using this . it will be helpful!!
    Thanks in advance

  • Lance

    Cool! I am a beginner, is there anywhere (website/book/tutorials) where I can get more of such??

    Please help me
    Thank you verymuch.

  • francesco

    Hi i have a question.
    I have a JavaScript code that block my script with IE 7 an 8, the error is:

    “Proprieties or method not supported”

    and the cause is this snippet of code:
    email = document.getElementById(“email”).value;

    Do you know how to fix this problem?
    Thanks a lot.
    Francesco

    • James K

      In the example, there is no field with the id set to “email”. I think it may work if you change your code to:
      email = document.getElementByName(‘email’).value;

  • http://www.umontreal.ca Mito

    je suis content

  • jacks

    Hey this script was really useful. Thanks.

  • TrialBuyFire

    Nice post.  Very clear and concise with easy to understand examples.  Also really like the layout and use of color…

  • Ratan Mohapatra

    Perfect refreshment! Keep it up.

Previous post:

Next post: