From..
http://www.javascript-coder.com/javascript-form/getelementbyid-form.phtml
http://www.tizag.com/javascriptT/javascript-getelementbyid.php
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();" /> |
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') |
Example: Input validation
The code below makes sure that the field is not empty.
First, we trim out any leading and trailing blank space.
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:
if (document.getElementById) |
return document.getElementById(id); |
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"); |
"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"; |
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> |
We could access the desired element in this way:
var mail_format_elements = document.getElementsByName('mail_format'); |
.
