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.

<html>
<head>
<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;
}
//-->
</script>
</head>
<body >
<form name="form1">
Name: <input type="text" name="inp1" value=""><br>
<input type="button" value="Click" name="buton" onClick="alert('Hy ' +getInput())">
</form>
</body>
</html>
- This code will display the following form:
Name:
- 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:
document.forms[0].elements[0].value
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:
document.form_name.element_name.value
Applying this formula, to get the value added in the text box of the above example, you write the code:
document.form1.inp1.value

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.
<html>
<head>
<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;
}
--></script>
</head>
<body>
<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" />
</form>
</body>
</html>
- 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.
<html>
<head>
<title>Script2 JS</title>
<script type="text/javascript"><!--
function inDiv(){
  var txt = document.getElementById("txtar2").value;
  document.getElementById("div_id2").innerHTML = txt;
}
--></script>
</head>
<body>
<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();" />
</form>
</body>
</html>
- 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

HTML
CSS
JavaScript
PHP-MySQL
Which attribute is used in <a> tag for the address of the link?
src href rel
<a href="http://coursesweb.net/" title="CoursesWeb.net">CoursesWeb.net</a>
Which CSS property sets the type of the text font?
font-family text-decoration font-size
h2 {
  font-family:"Calibri",sans-serif;
}
What instruction selects all the <div> tags with class="cls"?
querySelector("div.cls") getElementsByTagName("div") querySelectorAll("div.cls")
var elm_list = document.querySelectorAll("div.cls");
var nr_elms = elm_list.length;       // number of selected items
alert(nr_elms);
Indicate the function that can be used to get the sum of values in an array.
array_sum() array_diff() array_shift()
$arr = array(1, 2, 3, 4);
$arr_sum = array_sum($arr);
echo $arr_sum;       // 10
Document object and Forms

Last accessed pages

  1. Butterfly Kyodai (17500)
  2. Remove / Get duplicate array values - Reset array keys in PHP (6584)
  3. Math Mahjong Advanced (1084)
  4. Read Excel file data in PHP - PhpExcelReader (41426)
  5. Star shapes with CSS (3431)

Popular pages this month

  1. Qwop (4726)
  2. Bubbles3 (4342)
  3. Butterfly Kyodai (3092)
  4. Zuma Deluxe (2868)
  5. Backgammon (1463)