The elements of the Forms can be accessed through the document object. The Forms is a sub-objects (or property) of the document object.
To understand the document object hierarchy and how to work with the document and form objects, study the following example.

<title>JS example</title>
<script type="text/javascript">
function getInput() {
  // gets and returns the value from "inp1" field
  var name = document.form1.inp1.value;
  return name;
<body >
<form name="form1">
Name: <input type="text" name="inp1" value=""><br>
<input type="button" value="Click" name="buton" onClick="alert('Hy ' +getInput())">
- This code will display the following form:
- After you type a name it the text-box and click on "Click" button, it returns an Alert with the message "Hy the_name".
The DOM hierarchy to access the Form elements displayed in the page of this example is the following: For example, if you want to access /get the value of first element of the form, you must consider how to access this object.
We start from the top of the hierarchy "document", follow the path to the first form "Forms[0]", then to the object called "elements[0]", and last, we use the "value" property. Thus we can access the first element by using the expresion:
When in the page there are more forms with various elements, insted of using their index we can use their name (added at the name attibute). In that case the sintax is:
Applying this formula, to get the value added in the text box of the above example, you write the code:

2) The next script is a practical example of using JavaScript and DOM hierarchy with HTML elements.
This script takes the text within a "<div> ... </div>" and add it in a <textarea> box, so that text can be easily sent to a PHP script.
<title>Script JS</title>
<script type="text/javascript"><!--
function readDiv(){
 // gets the text
 valDiv = document.getElementById("div_id").childNodes[0].nodeValue;

 // adds the text inside the form element with name="iex2"
 document.fex2.iex2.value = valDiv;
<div id="div_id">Here is the text inside DIV</div>
<form action="file.php" method="post" name="fex2">
<textarea cols="30" rows="5" name="iex2"></textarea><br>
<input type="button" value="Add" onclick="readDiv();" />
<input type="submit" value="Send" />
- We have defined the function "readDiv()" that will be called when is clicked the button "Add".
- document.getElementById("div_id").childNodes[0].nodeValue; takes the contents of the HTML tag, with id="div_id"
- document.fex2.iex2.value = valDiv; adds the value of the "valDiv" variable in the form box with name="iex2".
- This code will display the following result:
Here is the text inside DIV

- If you click on the "Add" button, the text inside the <div> tag will be placed in the textarea form. Then, by clicking "Send", the text can be sent to a PHP script (here "file.php).

You can also use the ID of the form element, with the getElementById() method, to access it, as you can see in the next example.

3) Here's another practical script, with a reverse action of the above example.
The text written in a textarea field will be displayed in a HTML tag (<div>), after clicking on a button.
<title>Script2 JS</title>
<script type="text/javascript"><!--
function inDiv(){
  var txt = document.getElementById("txtar2").value;
  document.getElementById("div_id2").innerHTML = txt;
<div id="div_id2">Here will be displayed the text added in the textarea field</div><br>
<form name="f3">
<textarea cols="30" rows="5" name="text2" id="txtar2"></textarea><br>
<input type="button" value="Show" onclick="inDiv();" />
- We have defined the function "inDiv()" that will be called at clicking the "Show" button. Inside this function, the "txt" variable receives with "document.getElementById("txtar2").value" the text added in the field whose id is "txtar2", then the code "document.getElementById("div_id2").innerHTML = txt" transfers the value of "txt" in the HTML tag whose id is "div_id2", replacing the existing one.
- This code will display the following result:
Here will be displayed the text added in the textarea field

- Add any text in the textarea field, then click "Show", you will see the result.
This action is on the client side, visible only to the current user, and does not change the original page from the server. The added text disappears after closing the browser window.

Daily Test with Code Example

Which tag is used in <table> to create table header cell?
<thead> <th> <td>
  <th>Title 1</th>
  <th>Title 2</th>
Which CSS property sets the distance between lines?
line-height word-spacing margin
.some_class {
  line-height: 150%;
Which function opens a new browser window.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){"");
Indicate the PHP function that returns an array with names of the files and folders inside a directory.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
Document object and Forms

Last accessed pages

  1. Pagination Class - Script to paginate content (1435)
  2. Butterfly Kyodai (25093)
  3. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (54435)
  4. MD5 hash string in JavaScript (805)
  5. Register and show online users and visitors (16824)

Popular pages this month

  1. Bubbles3 (3397)
  2. Butterfly Kyodai (3013)
  3. Zuma Deluxe (2212)
  4. Qwop (1433)
  5. Backgammon (1307)