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 can be used to add CSS styles directly in the HTML tag?
type style class
<div style="width: 80%; border: 3px solid #888888;">Content</div>
Which CSS transform method distorts the HTML element in a given angle (including its content)?
translate() scale() skew()
#some_id {
  transform: skew(20deg, 25deg);
  -ms-transform: skew(20deg, 25deg);   /* IE 9 */
  -webkit-transform: skew(20deg, 25deg);   /* Safari and Chrome */
}
Click on the function which converts a Date object to a string.
indexOf() toString() getDate()
var rightnow = new Date();
alert( rightnow.toString() );
Which function applies a callback function to the elements of the given array?
array_merge() array_search() array_map()
$arr = arra("abc", "<p>xyz</p>", "<em>PHP</em>");
// apply the strip_tags() function to delete HTML tags from each array item
$arr = array_map("strip_tags", $arr);
}
Document object and Forms

Last accessed pages

  1. Mahjong Games (17769)
  2. Get Lower, Higher, and Closest Number (1574)
  3. Mahjong Long (687)
  4. jQuery ajax() method (13416)
  5. SHA512 Encrypt hash in JavaScript (7775)

Popular pages this month

  1. Qwop (3030)
  2. Drag Racer V3 (1516)
  3. Bubbles3 (727)
  4. Flash Games - Free online Games (677)
  5. Courses Web: PHP-MySQL JavaScript Ajax HTML CSS Flash-AS3 (665)