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 create a highlighted bolded text?
<q> <strong> <em>
<p>Address: <strong>http://CoursesWeb.net/</strong> - Tutorials.</p>
Which of these CSS codes displays the text bolded?
text-size: 18px; font-style: italic; font-weight: 800;
#id {
  font-weight: 800;
}
What JavaScript function can be used to call another function multiple times, to a specified time interval?
setInterval() setTimeout() push()
function someFunction() { alert("CoursesWeb.net"); }
setInterval("someFunction()", 2000);
Click on the correctly defined variable in PHP.
var vname = 8; $vname = 8; $vname == 8;
$vname = 8;
echo $vname;
Document object and Forms

Last accessed pages

  1. Insert, Select and Update NULL value in MySQL (10632)
  2. PHP Simple HTML DOM Parser (4921)
  3. Add, Change, and Remove Attributes with jQuery (21328)
  4. Display data from PHP Array, or MySQL in HTML table (8710)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (43889)

Top accessed pages

  1. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (43889)
  2. PHP-MySQL free course, online tutorials PHP MySQL code (33288)
  3. Read Excel file data in PHP - PhpExcelReader (33148)
  4. Get Attribute (ID, Class, Name, Title, Src) with jQuery (29962)
  5. PHP PDO - exec (INSERT, UPDATE, DELETE) MySQL (27281)