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 tag defines the clickable areas inside the image map?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Which CSS property defines what is done if the content in a box is too big for its defined space?
display overflow position
#id {
  overflow: auto;
}
Click on the event which is triggered when the mouse is positioned over an object.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Have Good Life");
}
Indicate the PHP variable that contains data added in URL address after the "?" character.
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Document object and Forms

Last accessed pages

  1. PHP-MySQL free course, online tutorials PHP MySQL code (41827)
  2. Qwop (39687)
  3. Drag Racer V3 (14587)
  4. Create simple Website with PHP (15204)
  5. Zuma Games (17987)

Popular pages this month

  1. Qwop (6862)
  2. Drag Racer V3 (4692)
  3. Bubbles3 (1916)
  4. List with All the Games (1605)
  5. Butterfly Kyodai (1507)